:root {
  --ink: #10283d;
  --ink-2: #23445e;
  --muted: #61788b;
  --faint: #8295a5;
  --blue: #0b5fa7;
  --blue-2: #167ebd;
  --cyan: #09a9c5;
  --jade: #4f8876;
  --copper: #a16b46;
  --red: #b85f58;
  --amber: #b8832e;
  --paper: #ffffff;
  --surface: #f4f8fa;
  --surface-2: #eef4f7;
  --line: #dbe5eb;
  --line-strong: #c9d8e2;
  --shadow: 0 22px 60px rgba(29, 65, 91, 0.09);
  --shadow-soft: 0 10px 28px rgba(29, 65, 91, 0.07);
  --radius: 20px;
  --radius-small: 12px;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 5% 6%, rgba(9, 169, 197, 0.05), transparent 24rem),
    linear-gradient(180deg, #fbfdfe 0, #f4f8fa 58%, #f7fafb 100%);
  color: var(--ink);
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

img {
  display: block;
  max-width: 100%;
}

.app-shell {
  min-height: 100vh;
}

.global-header {
  position: sticky;
  z-index: 50;
  top: 0;
  display: grid;
  grid-template-columns: minmax(230px, 330px) 1fr auto;
  align-items: center;
  min-height: 78px;
  padding: 0 4vw;
  border-bottom: 1px solid rgba(207, 221, 230, 0.84);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(18px);
}

.brand {
  width: 310px;
  padding: 0;
  border: 0;
  background: transparent;
}

.brand img {
  width: 100%;
}

.portal-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.portal-switch button,
.context-nav button,
.back-to-portals {
  border: 0;
  background: transparent;
  color: var(--muted);
  transition: 180ms ease;
}

.portal-switch button {
  min-width: 102px;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14px;
}

.portal-switch button:hover,
.portal-switch button.active {
  background: #eaf3f8;
  color: var(--blue);
}

.portal-switch button.active {
  font-weight: 760;
}

.demo-state {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 7px;
  color: var(--muted);
  font-size: 11px;
}

.demo-state i {
  grid-row: 1 / 3;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #42a97a;
  box-shadow: 0 0 0 5px rgba(66, 169, 122, 0.1);
}

.demo-state strong {
  color: var(--ink-2);
  font-size: 12px;
}

.context-bar {
  position: sticky;
  z-index: 45;
  top: 78px;
  display: grid;
  grid-template-columns: 210px 1fr auto;
  align-items: center;
  min-height: 52px;
  padding: 0 4vw;
  border-bottom: 1px solid var(--line);
  background: rgba(247, 250, 252, 0.94);
  backdrop-filter: blur(14px);
}

.context-bar[hidden] {
  display: none;
}

.context-name {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 780;
}

.context-nav {
  display: flex;
  justify-content: center;
  gap: 25px;
  min-width: 0;
  overflow-x: auto;
}

.context-nav button {
  position: relative;
  height: 52px;
  padding: 0 2px;
  font-size: 13px;
}

.context-nav button::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  content: "";
  opacity: 0;
}

.context-nav button:hover,
.context-nav button.active {
  color: var(--blue);
}

.context-nav button.active::after {
  opacity: 1;
}

.back-to-portals {
  font-size: 11px;
}

.back-to-portals[hidden] {
  display: none;
}

.context-bar.home-context {
  background: rgba(247, 251, 254, 0.96);
}

.context-bar.home-context .context-name {
  color: var(--blue);
}

#view {
  min-height: calc(100vh - 210px);
  outline: none;
}

.page {
  width: min(1460px, calc(100% - 8vw));
  margin: 0 auto;
  padding: 54px 0 80px;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--blue-2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.display-title {
  max-width: 900px;
  margin: 0;
  color: var(--ink);
  font-size: clamp(43px, 5.2vw, 78px);
  font-weight: 690;
  letter-spacing: -0.05em;
  line-height: 1.04;
}

.lead {
  max-width: 720px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.8;
}

.primary-button,
.secondary-button,
.ghost-button {
  min-height: 46px;
  padding: 0 21px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  transition: 180ms ease;
}

.primary-button {
  border: 1px solid var(--blue);
  background: var(--blue);
  color: #fff;
}

.primary-button:hover {
  border-color: #084b83;
  background: #084b83;
  transform: translateY(-1px);
}

.secondary-button {
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink-2);
}

.secondary-button:hover,
.ghost-button:hover {
  border-color: #a9c4d4;
  background: #f1f7fa;
}

.ghost-button {
  border: 1px solid transparent;
  background: transparent;
  color: var(--blue);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}

.landing-page {
  width: 100%;
  padding: 0 0 78px;
}

.landing-hero {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  background: #173f58;
}

.landing-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.76) contrast(0.98);
}

.landing-hero::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(9, 34, 54, 0.84) 0%, rgba(9, 34, 54, 0.65) 42%, rgba(9, 34, 54, 0.1) 78%),
    linear-gradient(0deg, rgba(8, 28, 44, 0.5), transparent 48%);
  content: "";
}

.landing-copy {
  position: relative;
  z-index: 2;
  width: min(1460px, calc(100% - 8vw));
  margin: 0 auto;
  padding-top: 112px;
  color: #fff;
}

.landing-copy .eyebrow {
  color: #7fdbeb;
}

.landing-copy h1 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(48px, 6.4vw, 90px);
  font-weight: 660;
  letter-spacing: -0.055em;
  line-height: 1.03;
}

.landing-copy > p:not(.eyebrow) {
  max-width: 680px;
  margin: 25px 0 0;
  color: rgba(255, 255, 255, 0.83);
  font-size: 18px;
  line-height: 1.8;
}

.hero-note {
  position: absolute;
  z-index: 3;
  right: 4vw;
  bottom: 28px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 10px;
  text-align: right;
}

.portal-grid {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: min(1320px, calc(100% - 8vw));
  margin: -64px auto 0;
}

.portal-card {
  position: relative;
  min-height: 270px;
  overflow: hidden;
  padding: 30px;
  border: 1px solid rgba(205, 219, 227, 0.9);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--shadow);
  text-align: left;
}

.portal-card::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  content: "";
  transform: scaleX(0.28);
  transform-origin: left;
  transition: 250ms ease;
}

.portal-card:hover::before {
  transform: scaleX(1);
}

.portal-card:hover {
  border-color: #b9d1df;
  transform: translateY(-4px);
}

.portal-card .portal-code {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 34px;
  border-radius: 50%;
  background: #edf5f9;
  color: var(--blue);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.06em;
}

.portal-card small {
  display: block;
  color: var(--faint);
  font-size: 11px;
}

.portal-card strong {
  display: block;
  margin-top: 7px;
  font-size: 25px;
}

.portal-card p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.portal-card b {
  position: absolute;
  right: 26px;
  bottom: 24px;
  color: var(--blue);
  font-size: 22px;
  font-weight: 400;
}

.permission-overview {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 320px 1fr 1.1fr;
  align-items: center;
  gap: 28px;
  width: min(1320px, calc(100% - 8vw));
  margin: -54px auto 0;
  padding: 24px 28px;
  border: 1px solid rgba(205, 219, 227, 0.92);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--shadow);
}

.permission-overview strong {
  display: block;
  margin-top: 6px;
  font-size: 21px;
}

.permission-overview p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.permission-scopes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.permission-scopes span {
  padding: 8px 10px;
  border: 1px solid #cfe0e8;
  border-radius: 999px;
  background: #f2f8fa;
  color: var(--blue);
  font-size: 12px;
}

.capability-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 13px;
  width: min(1320px, calc(100% - 8vw));
  margin: 26px auto 0;
}

.capability-card {
  position: relative;
  min-height: 205px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  transition: 180ms ease;
}

.capability-card:hover {
  border-color: #a9c8d7;
  box-shadow: var(--shadow-soft);
  transform: translateY(-3px);
}

.capability-code {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #eef6fa;
  color: var(--blue);
  font-size: 11px;
  font-weight: 850;
}

.capability-card small {
  position: absolute;
  top: 25px;
  right: 22px;
  color: var(--faint);
  font-size: 11px;
}

.capability-card strong {
  display: block;
  margin-top: 22px;
  font-size: 18px;
}

.capability-card p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.62;
}

.capability-card b {
  position: absolute;
  right: 22px;
  bottom: 18px;
  color: var(--blue);
  font-size: 12px;
}

.capability-card.locked {
  border-style: dashed;
  background: #f7f9fa;
}

.capability-card.locked .capability-code {
  background: #edf0f2;
  color: #8797a2;
}

.capability-card.locked b {
  color: var(--amber);
}

.access-matrix-section {
  width: min(1320px, calc(100% - 8vw));
  margin: 70px auto 0;
}

.access-matrix-section .section-head {
  align-items: end;
}

.access-matrix-section .section-head > p {
  max-width: 600px;
  font-size: 14px;
  line-height: 1.75;
}

.access-matrix {
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.matrix-row {
  display: grid;
  grid-template-columns: 1.25fr repeat(4, 1fr);
  min-width: 820px;
  border-top: 1px solid #e5edf1;
}

.matrix-row:first-child {
  border-top: 0;
}

.matrix-row > * {
  min-width: 0;
  padding: 16px 18px;
  border-left: 1px solid #e5edf1;
  font-size: 13px;
  line-height: 1.45;
}

.matrix-row > *:first-child {
  border-left: 0;
}

.matrix-row > strong:first-child {
  color: var(--ink);
  font-size: 14px;
}

.matrix-row > span {
  color: #315467;
}

.matrix-header {
  background: #edf6f9;
}

.matrix-header > strong {
  color: var(--blue);
  font-size: 13px;
}

.matrix-none {
  color: #9aa9b2 !important;
}

.matrix-note {
  margin: 14px 2px 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.permission-lock-card {
  max-width: 820px;
  margin: 20px auto 50px;
  padding: 52px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow);
  text-align: center;
}

.lock-symbol {
  display: inline-grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 25px;
  border-radius: 50%;
  background: #fff5e5;
  color: var(--amber);
  font-size: 13px;
  font-weight: 800;
}

.permission-lock-card h1 {
  margin: 0;
  font-size: 40px;
}

.permission-lock-card > p:not(.eyebrow) {
  max-width: 620px;
  margin: 18px auto 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
}

.permission-reason {
  display: grid;
  gap: 7px;
  margin-top: 25px;
  padding: 17px;
  border-radius: 11px;
  background: #f3f7f9;
  font-size: 13px;
}

.permission-reason span {
  color: var(--muted);
}

.permission-lock-card .button-row {
  justify-content: center;
}

.permission-lock-card > small {
  display: block;
  margin-top: 24px;
  color: var(--faint);
  font-size: 11px;
}

.platform-principles {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, 1fr);
  gap: 30px;
  width: min(1320px, calc(100% - 8vw));
  margin: 70px auto 0;
  padding-top: 34px;
  border-top: 1px solid var(--line);
}

.platform-principles h2 {
  margin: 0;
  font-size: 22px;
}

.platform-principles article span {
  color: var(--blue-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.platform-principles article strong {
  display: block;
  margin-top: 8px;
  font-size: 14px;
}

.platform-principles article p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.page-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 34px;
}

.page-heading h1 {
  margin: 0;
  font-size: clamp(38px, 4vw, 61px);
  font-weight: 680;
  letter-spacing: -0.045em;
}

.page-heading p:not(.eyebrow) {
  max-width: 760px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
}

.status-pill {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid #cde0e8;
  border-radius: 999px;
  background: #f4fafc;
  color: var(--blue-2);
  font-size: 11px;
}

.feature-hero {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  min-height: 500px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.feature-copy {
  padding: clamp(36px, 5vw, 76px);
}

.feature-copy h2 {
  margin: 0;
  font-size: clamp(35px, 4vw, 58px);
  letter-spacing: -0.045em;
  line-height: 1.08;
}

.feature-copy > p {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.85;
}

.feature-image {
  position: relative;
  min-height: 480px;
  overflow: hidden;
  background: var(--surface-2);
}

.feature-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-caption {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  background: rgba(9, 31, 47, 0.72);
  color: #fff;
  backdrop-filter: blur(10px);
}

.image-caption strong,
.image-caption small {
  display: block;
}

.image-caption strong {
  font-size: 13px;
}

.image-caption small {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 9px;
}

.image-caption button {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: #9be3ee;
  font-size: 11px;
}

.quick-questions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 30px;
}

.quick-questions button {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink-2);
  font-size: 12px;
  text-align: left;
}

.quick-questions button:hover {
  border-color: #acc9d8;
  background: #f1f8fb;
}

.section-block {
  margin-top: 64px;
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 22px;
}

.section-head span {
  color: var(--blue-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.15em;
}

.section-head h2 {
  margin: 6px 0 0;
  font-size: 27px;
  letter-spacing: -0.025em;
}

.section-head p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
  text-align: right;
}

.sample-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.sample-card,
.dataset-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 7px 22px rgba(29, 65, 91, 0.05);
}

.sample-card button,
.dataset-card button.image-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: #e8eef1;
}

.sample-card img {
  width: 100%;
  height: 245px;
  object-fit: cover;
  transition: 260ms ease;
}

.sample-card:hover img {
  transform: scale(1.025);
}

.sample-card > div,
.dataset-card > div {
  padding: 18px;
}

.sample-card span,
.dataset-card span,
.micro-label {
  color: var(--blue-2);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.sample-card strong,
.dataset-card strong {
  display: block;
  margin-top: 7px;
  font-size: 15px;
}

.sample-card p,
.dataset-card p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.65;
}

.note-strip {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  margin-top: 22px;
  padding: 16px 18px;
  border-left: 3px solid var(--jade);
  background: #edf6f2;
  color: #486e60;
  font-size: 12px;
  line-height: 1.7;
}

.note-strip strong {
  white-space: nowrap;
}

.assistant-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
}

.chat-panel,
.reference-panel,
.remote-panel,
.control-panel,
.map-panel,
.evidence-panel,
.report-panel,
.risk-panel,
.gov-side,
.gov-main {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-soft);
}

.chat-panel {
  min-height: 560px;
  padding: 28px;
}

.chat-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 19px;
  border-bottom: 1px solid var(--line);
}

.chat-title strong {
  font-size: 17px;
}

.chat-title span {
  color: var(--jade);
  font-size: 10px;
}

.question-bubble {
  width: fit-content;
  max-width: 72%;
  margin: 30px 0 0 auto;
  padding: 13px 17px;
  border-radius: 14px 14px 3px 14px;
  background: var(--blue);
  color: #fff;
  font-size: 14px;
  line-height: 1.6;
}

.answer-bubble {
  max-width: 84%;
  margin-top: 16px;
  padding: 21px;
  border: 1px solid var(--line);
  border-radius: 3px 14px 14px 14px;
  background: #f8fbfc;
}

.answer-bubble strong {
  display: block;
  font-size: 15px;
}

.answer-bubble p {
  margin: 10px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.85;
}

.answer-sources {
  display: grid;
  gap: 7px;
  margin-top: 18px;
}

.answer-sources span {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 10px;
}

.question-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}

.question-list button {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--blue);
  font-size: 11px;
}

.reference-panel {
  overflow: hidden;
}

.reference-panel img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.reference-panel > div {
  padding: 20px;
}

.reference-panel h3 {
  margin: 7px 0 0;
  font-size: 17px;
}

.reference-panel p,
.reference-panel li {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}

.reference-panel ul {
  padding-left: 18px;
}

.remote-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 16px;
}

.control-panel {
  padding: 22px;
}

.control-panel h2,
.evidence-panel h2,
.gov-side h2 {
  margin: 6px 0 20px;
  font-size: 18px;
}

.control-group {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.control-group > span {
  color: var(--faint);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.stack-buttons {
  display: grid;
  gap: 7px;
  margin-top: 11px;
}

.stack-buttons button,
.layer-buttons button,
.target-list button,
.tab-row button {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--muted);
  transition: 160ms ease;
}

.stack-buttons button {
  padding: 11px 12px;
  text-align: left;
  font-size: 11px;
}

.stack-buttons button.active,
.stack-buttons button:hover,
.layer-buttons button.active,
.target-list button.active,
.tab-row button.active {
  border-color: #93bbd1;
  background: #edf6fa;
  color: var(--blue);
  font-weight: 720;
}

.range-row {
  margin-top: 13px;
}

.range-row label {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 10px;
}

.range-row input {
  width: 100%;
  margin-top: 10px;
  accent-color: var(--blue);
}

.remote-panel,
.map-panel,
.gov-main {
  overflow: hidden;
}

.panel-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 62px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
}

.panel-toolbar strong {
  font-size: 14px;
}

.panel-toolbar span {
  color: var(--faint);
  font-size: 10px;
}

.map-stage {
  position: relative;
  height: 600px;
  overflow: hidden;
  background: #dfe8e9;
}

.map-stage > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 220ms ease;
}

.map-stage.remote-result::after {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 34% 42%, rgba(255, 181, 55, 0.55), transparent 9%),
    radial-gradient(ellipse at 64% 58%, rgba(26, 184, 194, 0.48), transparent 11%),
    radial-gradient(ellipse at 77% 33%, rgba(203, 91, 75, 0.45), transparent 8%);
  content: "";
  mix-blend-mode: screen;
}

.stage-tag {
  position: absolute;
  z-index: 4;
  right: 16px;
  bottom: 16px;
  padding: 8px 10px;
  border-radius: 7px;
  background: rgba(13, 37, 54, 0.76);
  color: #fff;
  font-size: 9px;
  backdrop-filter: blur(8px);
}

.workflow-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--line);
}

.workflow-row article {
  padding: 18px;
  background: #fff;
}

.workflow-row i {
  color: var(--blue-2);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

.workflow-row strong {
  display: block;
  margin-top: 8px;
  font-size: 13px;
}

.workflow-row p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}

.remote-browser {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr) 300px;
  gap: 14px;
  align-items: start;
}

.remote-browser-controls,
.remote-inspector {
  position: sticky;
  top: 146px;
}

.remote-scene-list button strong,
.remote-scene-list button small {
  display: block;
}

.remote-scene-list button strong {
  font-size: 14px;
}

.remote-scene-list button small {
  margin-top: 4px;
  color: var(--faint);
  font-size: 12px;
  font-weight: 400;
}

.remote-layer-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin-top: 11px;
}

.remote-layer-options button {
  min-height: 40px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  text-align: left;
}

.remote-layer-options button.active {
  border-color: #8db9cf;
  background: #edf6fa;
  color: var(--blue);
  font-weight: 750;
}

.remote-layer-options button.disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.algorithm-access > strong {
  display: block;
  margin-top: 10px;
  color: var(--ink-2);
  font-size: 14px;
}

.algorithm-access > p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.algorithm-access > button {
  width: 100%;
  margin-top: 14px;
}

.algorithm-access.locked {
  padding: 14px;
  border: 1px dashed #e0c68f;
  border-radius: 10px;
  background: #fff9ee;
}

.remote-map-card,
.remote-inspector {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.remote-map-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 66px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
}

.remote-map-toolbar strong,
.remote-map-toolbar span {
  display: block;
}

.remote-map-toolbar strong {
  font-size: 15px;
}

.remote-map-toolbar span {
  margin-top: 4px;
  color: var(--faint);
  font-size: 12px;
}

.map-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

.map-tools button {
  min-width: 34px;
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink-2);
  font-size: 14px;
}

.map-tools b {
  min-width: 50px;
  color: var(--blue);
  font-size: 13px;
  text-align: center;
}

.remote-viewport {
  position: relative;
  height: 670px;
  overflow: hidden;
  background: #172d39;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.remote-viewport.dragging {
  cursor: grabbing;
}

.remote-image-canvas {
  position: absolute;
  inset: 0;
  transform-origin: center;
  transition: transform 90ms ease-out;
}

.remote-viewport.dragging .remote-image-canvas {
  transition: none;
}

.remote-base-image,
.remote-overlay,
.remote-overlay img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.remote-overlay {
  z-index: 2;
  pointer-events: none;
}

.remote-overlay img {
  mix-blend-mode: normal;
}

.algorithm-highlight {
  position: absolute;
  z-index: 3;
  inset: 0;
  background:
    radial-gradient(ellipse at 33% 43%, rgba(255, 236, 119, 0.36), transparent calc(12% + (var(--threshold) - 60%) * .18)),
    radial-gradient(ellipse at 67% 57%, rgba(255, 91, 71, 0.34), transparent calc(10% + (var(--threshold) - 60%) * .12)),
    radial-gradient(ellipse at 76% 31%, rgba(69, 227, 224, 0.3), transparent 9%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.remote-hotspot {
  position: absolute;
  z-index: 5;
  width: 18px;
  height: 18px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 7px rgba(9, 169, 197, 0.2), 0 5px 15px rgba(10, 31, 43, 0.3);
}

.remote-hotspot::after {
  position: absolute;
  top: 18px;
  left: 5px;
  color: #fff;
  font-size: 10px;
  font-weight: 850;
}

.hotspot-one { left: 36%; top: 42%; }
.hotspot-one::after { content: "A"; }
.hotspot-two { left: 69%; top: 58%; }
.hotspot-two::after { content: "B"; }

.compare-divider {
  position: absolute;
  z-index: 7;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(20, 48, 64, 0.25);
  pointer-events: none;
}

.compare-divider b {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 46px;
  border: 2px solid #fff;
  border-radius: 8px;
  background: rgba(12, 43, 60, 0.74);
  transform: translate(-50%, -50%);
}

.compare-divider b::before,
.compare-divider b::after {
  position: absolute;
  top: 14px;
  color: #fff;
  font-size: 12px;
}

.compare-divider b::before { left: 5px; content: "‹"; }
.compare-divider b::after { right: 5px; content: "›"; }

.compare-divider > span {
  position: absolute;
  top: 14px;
  width: max-content;
  padding: 6px 8px;
  border-radius: 5px;
  background: rgba(11, 38, 54, 0.72);
  color: #fff;
  font-size: 10px;
}

.compare-divider > span:first-child { right: 10px; }
.compare-divider > span:last-child { left: 10px; }

.remote-coordinates,
.drag-hint,
.remote-scale {
  position: absolute;
  z-index: 8;
  border-radius: 6px;
  background: rgba(10, 35, 49, 0.72);
  color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
}

.remote-coordinates {
  top: 13px;
  right: 13px;
  padding: 7px 9px;
  font-size: 12px;
}

.drag-hint {
  right: 13px;
  bottom: 13px;
  padding: 7px 9px;
  font-size: 11px;
}

.remote-scale {
  bottom: 13px;
  left: 13px;
  padding: 8px 10px;
  font-size: 11px;
}

.remote-scale i {
  display: block;
  width: 80px;
  height: 5px;
  margin-bottom: 5px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
}

.remote-inspector {
  padding: 22px;
}

.remote-inspector h2 {
  margin: 6px 0 18px;
  font-size: 20px;
}

.coordinate-card {
  padding: 14px;
  border-radius: 10px;
  background: #edf6fa;
}

.coordinate-card span,
.coordinate-card strong,
.coordinate-card p {
  display: block;
}

.coordinate-card span {
  color: var(--blue-2);
  font-size: 12px;
}

.coordinate-card strong {
  margin-top: 7px;
  font-size: 14px;
}

.coordinate-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.metadata-list {
  margin-top: 16px;
  border-top: 1px solid var(--line);
}

.metadata-list p {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  margin: 0;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.metadata-list span,
.metadata-list strong {
  font-size: 12px;
}

.metadata-list span { color: var(--muted); }
.metadata-list strong { color: var(--ink-2); text-align: right; }

.spectral-bars {
  margin-top: 20px;
}

.spectral-bars > span {
  color: var(--faint);
  font-size: 11px;
  font-weight: 800;
}

.spectral-bars label {
  display: grid;
  grid-template-columns: 90px 1fr 24px;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
}

.spectral-bars i {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-2);
}

.spectral-bars i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
}

.spectral-bars label > strong {
  color: var(--ink-2);
  text-align: right;
}

.interpretation-card {
  margin-top: 21px;
  padding: 14px;
  border-left: 3px solid var(--jade);
  background: #eef6f2;
}

.interpretation-card span {
  color: var(--jade);
  font-size: 12px;
  font-weight: 800;
}

.interpretation-card p {
  margin: 7px 0 0;
  color: #4f7165;
  font-size: 12px;
  line-height: 1.65;
}

.case-intro {
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: #fff;
}

.case-photo {
  position: relative;
  min-height: 520px;
}

.case-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-copy {
  padding: clamp(36px, 4vw, 64px);
}

.case-copy h2 {
  margin: 0;
  font-size: clamp(34px, 4vw, 56px);
  letter-spacing: -0.04em;
}

.case-copy > p {
  margin: 19px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.85;
}

.lens-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 29px;
}

.lens-row button {
  padding: 13px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--muted);
  font-size: 11px;
}

.lens-row button.active {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.lens-copy {
  min-height: 118px;
  margin-top: 13px;
  padding: 17px;
  border-radius: 11px;
  background: #f1f7fa;
}

.lens-copy strong {
  font-size: 13px;
}

.lens-copy p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}

.evidence-flow {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.evidence-flow button {
  position: relative;
  min-height: 128px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  color: var(--ink-2);
  text-align: left;
}

.evidence-flow button::after {
  position: absolute;
  top: 50%;
  right: -11px;
  z-index: 2;
  width: 10px;
  height: 1px;
  background: var(--line-strong);
  content: "";
}

.evidence-flow button:last-child::after {
  display: none;
}

.evidence-flow button.active {
  border-color: #86b6ce;
  background: #eef7fa;
}

.evidence-flow i {
  display: block;
  color: var(--cyan);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

.evidence-flow strong {
  display: block;
  margin-top: 13px;
  font-size: 13px;
}

.evidence-flow p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}

.workspace-grid {
  display: grid;
  grid-template-columns: 235px minmax(0, 1fr) 330px;
  gap: 14px;
}

.layer-buttons {
  display: grid;
  gap: 7px;
  margin-top: 14px;
}

.layer-buttons button {
  display: grid;
  grid-template-columns: 9px 1fr;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  text-align: left;
}

.layer-buttons i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--line-strong);
}

.layer-buttons button.active i {
  background: var(--cyan);
}

.layer-buttons strong,
.layer-buttons small {
  display: block;
}

.layer-buttons strong {
  font-size: 11px;
}

.layer-buttons small {
  margin-top: 3px;
  color: var(--faint);
  font-size: 9px;
  font-weight: 400;
}

.sensitivity-box {
  margin-top: 22px;
  padding: 13px;
  border-radius: 10px;
  background: #eef6f2;
}

.sensitivity-box span,
.sensitivity-box strong {
  display: block;
}

.sensitivity-box span {
  color: var(--jade);
  font-size: 9px;
}

.sensitivity-box strong {
  margin-top: 5px;
  color: #486e60;
  font-size: 11px;
}

.target-marker {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: rgba(11, 95, 167, 0.38);
  color: #fff;
  font-size: 11px;
  font-weight: 780;
  box-shadow: 0 0 0 8px rgba(11, 95, 167, 0.12), 0 8px 25px rgba(14, 43, 65, 0.22);
}

.target-marker.active {
  background: rgba(161, 107, 70, 0.76);
  box-shadow: 0 0 0 9px rgba(161, 107, 70, 0.18), 0 8px 25px rgba(14, 43, 65, 0.25);
}

.target-a { left: 21%; top: 30%; }
.target-b { right: 22%; top: 25%; }
.target-c { left: 51%; bottom: 19%; }

.evidence-panel {
  padding: 21px;
}

.priority {
  display: inline-block;
  padding: 6px 8px;
  border-radius: 7px;
  background: #eef6f2;
  color: var(--jade);
  font-size: 10px;
  font-weight: 760;
}

.decision-item {
  margin-top: 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.decision-item span {
  color: var(--faint);
  font-size: 9px;
  font-weight: 820;
  letter-spacing: 0.08em;
}

.decision-item p {
  margin: 7px 0 0;
  color: var(--ink-2);
  font-size: 11px;
  line-height: 1.65;
}

.data-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.dataset-card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.dataset-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 14px;
}

.dataset-tags i {
  padding: 4px 6px;
  border-radius: 5px;
  background: #eff5f8;
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
}

.report-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 16px;
}

.report-panel,
.risk-panel {
  padding: 24px;
}

.report-preview {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 20px;
  margin-top: 20px;
}

.report-preview img {
  width: 190px;
  height: 260px;
  border: 1px solid var(--line);
  border-radius: 8px;
  object-fit: cover;
  object-position: top;
}

.report-preview h3 {
  margin: 0;
  font-size: 18px;
}

.report-preview p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}

.maturity-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 24px;
}

.maturity-track div {
  position: relative;
  padding-top: 20px;
  border-top: 4px solid var(--line);
  color: var(--faint);
  font-size: 9px;
}

.maturity-track div::before {
  position: absolute;
  top: -10px;
  left: 0;
  width: 14px;
  height: 14px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--line-strong);
  box-shadow: 0 0 0 1px var(--line-strong);
  content: "";
}

.maturity-track .done,
.maturity-track .current {
  border-color: var(--blue);
}

.maturity-track .done::before,
.maturity-track .current::before {
  background: var(--blue);
}

.maturity-track .current::before {
  background: var(--cyan);
}

.risk-list {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.risk-list article {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.risk-list strong {
  font-size: 12px;
}

.risk-list p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}

.risk-list span {
  padding: 5px 7px;
  border-radius: 5px;
  background: #fff4df;
  color: var(--amber);
  font-size: 9px;
}

.risk-list span.high {
  background: #faeceb;
  color: var(--red);
}

.gov-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.gov-tabs button {
  min-height: 54px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
}

.gov-tabs button.active {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.metric-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.metric-row article {
  min-height: 105px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
}

.metric-row span {
  color: var(--faint);
  font-size: 10px;
}

.metric-row strong {
  display: block;
  margin-top: 9px;
  font-size: 24px;
}

.metric-row small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 9px;
}

.gov-grid {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 15px;
}

.gov-side {
  padding: 22px;
}

.gov-list {
  display: grid;
  gap: 9px;
}

.gov-list article {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
}

.gov-list strong {
  display: block;
  font-size: 11px;
}

.gov-list p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.55;
}

.gov-alert {
  margin-top: 14px;
  padding: 13px;
  border-left: 3px solid var(--amber);
  background: #fff7e9;
  color: #86662d;
  font-size: 10px;
  line-height: 1.65;
}

.gov-map {
  position: relative;
  height: 590px;
  overflow: hidden;
  background: #dde7e9;
}

.gov-map > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gov-map::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(18, 66, 88, 0.03));
  content: "";
  pointer-events: none;
}

.gov-marker {
  position: absolute;
  z-index: 3;
  width: 15px;
  height: 15px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 6px rgba(9, 169, 197, 0.2);
}

.gov-marker.warning {
  background: var(--amber);
  box-shadow: 0 0 0 6px rgba(184, 131, 46, 0.18);
}

.gov-marker.one { left: 23%; top: 34%; }
.gov-marker.two { left: 49%; top: 57%; }
.gov-marker.three { right: 21%; top: 28%; }
.gov-marker.four { right: 32%; bottom: 18%; }

.governance-boundary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid #f0dfbe;
  border-radius: 11px;
  background: #fffaf1;
  color: #765e32;
  font-size: 11px;
  line-height: 1.65;
}

/* Motion and subsurface inversion */

@keyframes hero-drift {
  from { transform: scale(1.01) translate3d(0, 0, 0); }
  to { transform: scale(1.075) translate3d(-1.2%, -0.8%, 0); }
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scan-section {
  0% { transform: translateX(-12%); opacity: 0; }
  12% { opacity: 0.78; }
  88% { opacity: 0.78; }
  100% { transform: translateX(1120%); opacity: 0; }
}

@keyframes live-pulse {
  0%, 100% { opacity: 0.45; transform: scale(0.84); }
  50% { opacity: 1; transform: scale(1.08); }
}

.landing-hero > img {
  animation: hero-drift 24s ease-in-out infinite alternate;
}

.portal-card {
  animation: rise-in 620ms both;
}

.portal-card:nth-child(2) { animation-delay: 80ms; }
.portal-card:nth-child(3) { animation-delay: 160ms; }

.page > .page-heading,
.page > section,
.page > .note-strip,
.page > .governance-boundary {
  animation: rise-in 480ms both;
}

.page > section:nth-of-type(2),
.page > .note-strip { animation-delay: 70ms; }

.inversion-layout {
  display: grid;
  grid-template-columns: 255px minmax(0, 1fr) 300px;
  gap: 14px;
  align-items: start;
}

.inversion-control {
  position: sticky;
  top: 146px;
}

.inversion-mode-list button {
  display: block;
}

.inversion-mode-list strong,
.inversion-mode-list small {
  display: block;
}

.inversion-mode-list strong {
  font-size: 11px;
}

.inversion-mode-list small {
  margin-top: 4px;
  color: var(--faint);
  font-size: 8px;
  font-weight: 400;
  line-height: 1.45;
}

.inversion-stage-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.inversion-stage-name strong {
  color: var(--ink-2);
  font-size: 11px;
}

.inversion-stage-name b {
  color: var(--blue);
  font-size: 12px;
}

.inversion-range {
  width: 100%;
  margin-top: 15px;
  accent-color: var(--blue);
}

.inversion-play {
  width: 100%;
  margin-top: 14px;
}

.inversion-source-note {
  margin-top: 20px;
  padding: 13px;
  border-radius: 10px;
  background: #eef6f2;
}

.inversion-source-note span,
.inversion-source-note strong {
  display: block;
}

.inversion-source-note span {
  color: var(--jade);
  font-size: 9px;
}

.inversion-source-note strong {
  margin-top: 5px;
  color: #456b5e;
  font-size: 10px;
  line-height: 1.5;
}

.inversion-source-note p {
  margin: 7px 0 0;
  color: #678479;
  font-size: 9px;
  line-height: 1.55;
}

.inversion-center {
  min-width: 0;
}

.inversion-panel,
.inversion-inputs {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--shadow-soft);
}

.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--faint);
  font-size: 9px;
}

.live-indicator i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9eb0bc;
}

.live-indicator.running {
  color: var(--jade);
}

.live-indicator.running i {
  background: #3da475;
  animation: live-pulse 1.15s ease-in-out infinite;
}

.section-canvas-wrap {
  position: relative;
  overflow: hidden;
  background: #edf5f7;
}

#inversionCanvas {
  width: 100%;
  height: auto;
  min-height: 510px;
  object-fit: contain;
}

.canvas-scan {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  left: 0;
  width: 9%;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(91, 217, 227, 0.28), rgba(255, 255, 255, 0.62), transparent);
  pointer-events: none;
}

.canvas-scan.active {
  animation: scan-section 4.8s linear infinite;
}

.canvas-status {
  position: absolute;
  z-index: 5;
  top: 14px;
  left: 14px;
  max-width: 330px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 9px;
  background: rgba(247, 251, 252, 0.82);
  box-shadow: 0 5px 18px rgba(18, 52, 71, 0.1);
  backdrop-filter: blur(8px);
}

.canvas-status span,
.canvas-status strong {
  display: block;
}

.canvas-status span {
  color: var(--blue-2);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.canvas-status strong {
  margin-top: 5px;
  color: var(--ink-2);
  font-size: 10px;
}

.inversion-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  min-height: 47px;
  padding: 8px 15px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 8px;
}

.inversion-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.inversion-legend i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.legend-resistive { background: #d8814f; }
.legend-conductive { background: #5a9ec3; }
.legend-anomaly { border-radius: 50% !important; background: #c65349; box-shadow: 0 0 0 3px rgba(198,83,73,.17); }
.legend-drill { width: 3px !important; background: #1c5476; }
.legend-target { border: 2px dashed #d9a534; background: rgba(243,197,92,.25); }

.inversion-inputs {
  margin-top: 14px;
  padding: 18px;
}

.compact-head {
  margin-bottom: 14px;
}

.compact-head h2 {
  font-size: 18px;
}

.inversion-input-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.inversion-input-grid article {
  display: grid;
  grid-template-columns: 82px 1fr;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.inversion-input-grid button {
  padding: 0;
  border: 0;
  background: var(--surface-2);
}

.inversion-input-grid img {
  width: 82px;
  height: 88px;
  object-fit: cover;
}

.inversion-input-grid article > div {
  padding: 11px 9px;
}

.inversion-input-grid span {
  color: var(--blue-2);
  font-size: 7px;
  font-weight: 850;
}

.inversion-input-grid strong {
  display: block;
  margin-top: 5px;
  font-size: 10px;
}

.inversion-input-grid p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.45;
}

.inversion-result-panel {
  position: sticky;
  top: 146px;
}

.diagnostic-primary {
  margin-top: 10px;
  padding: 15px;
  border-radius: 11px;
  background: #edf5f9;
}

.diagnostic-primary span,
.diagnostic-primary strong {
  display: block;
}

.diagnostic-primary span {
  color: var(--blue-2);
  font-size: 8px;
  font-weight: 850;
}

.diagnostic-primary strong {
  margin-top: 7px;
  color: var(--ink-2);
  font-size: 13px;
}

.diagnostic-primary p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.55;
}

.diagnostic-metric {
  margin-top: 17px;
}

.diagnostic-metric > span,
.diagnostic-metric > strong {
  display: inline-block;
  font-size: 9px;
}

.diagnostic-metric > span {
  color: var(--muted);
}

.diagnostic-metric > strong {
  float: right;
  color: var(--ink-2);
}

.diagnostic-metric i {
  display: block;
  height: 4px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-2);
}

.diagnostic-metric i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  transition: width 120ms linear;
}

.uncertainty-card {
  margin-top: 20px;
  padding: 13px;
  border-left: 3px solid var(--amber);
  background: #fff8eb;
}

.uncertainty-card span {
  color: var(--amber);
  font-size: 9px;
  font-weight: 850;
}

.uncertainty-card p {
  margin: 7px 0 0;
  color: #78643b;
  font-size: 9px;
  line-height: 1.6;
}

.inversion-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--line);
}

.inversion-steps article {
  position: relative;
  min-height: 92px;
  padding: 16px;
  background: #fff;
  transition: 180ms ease;
}

.inversion-steps article::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: 280ms ease;
}

.inversion-steps article.complete {
  background: #f4fafc;
}

.inversion-steps article.complete::after {
  transform: scaleX(1);
}

.inversion-steps i {
  color: var(--blue-2);
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
}

.inversion-steps strong {
  display: block;
  margin-top: 7px;
  font-size: 11px;
}

.inversion-steps p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
}

/* Readability pass: presentation screens are viewed from a distance. */

.context-nav button,
.back-to-portals {
  font-size: 14px;
}

.micro-label,
.section-head span,
.dataset-card span,
.sample-card span,
.control-group > span,
.source-strip strong,
.evidence-flow i,
.decision-item span,
.gov-list strong,
.inversion-steps i,
.diagnostic-primary span,
.uncertainty-card span,
.inversion-source-note span {
  font-size: 11px;
}

.sample-card p,
.dataset-card p,
.reference-panel p,
.reference-panel li,
.workflow-row p,
.decision-item p,
.gov-list p,
.governance-boundary,
.note-strip,
.professional-note,
.inversion-mode-list small,
.diagnostic-primary p,
.uncertainty-card p,
.inversion-input-grid p {
  font-size: 12px;
}

.dataset-tags i,
.status-pill,
.panel-toolbar span,
.map-disclaimer,
.map-caption,
.inversion-legend,
.inversion-steps p,
.inversion-source-note p,
.global-footer {
  font-size: 11px;
}

.layer-buttons strong,
.inversion-mode-list strong,
.inversion-input-grid strong,
.workflow-row strong,
.evidence-flow strong,
.decision-item p {
  font-size: 13px;
}

.layer-buttons small,
.inversion-input-grid span,
.diagnostic-metric > span,
.diagnostic-metric > strong {
  font-size: 11px;
}

.inversion-stage-name strong,
.canvas-status strong {
  font-size: 12px;
}

.canvas-status span {
  font-size: 10px;
}

.global-footer {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  align-items: center;
  gap: 26px;
  min-height: 94px;
  padding: 18px 4vw;
  border-top: 1px solid var(--line);
  background: #fff;
  color: var(--faint);
  font-size: 11px;
}

.global-footer > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.global-footer img {
  width: 36px;
  height: 36px;
}

.global-footer p {
  margin: 0;
}

.global-footer strong,
.global-footer span {
  display: block;
}

.global-footer strong {
  color: var(--ink-2);
  font-size: 11px;
}

.image-dialog {
  max-width: min(1180px, 92vw);
  padding: 0;
  border: 0;
  border-radius: 15px;
  background: #0d2435;
  color: #fff;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.36);
}

.image-dialog::backdrop {
  background: rgba(6, 19, 29, 0.72);
  backdrop-filter: blur(5px);
}

.image-dialog img {
  max-width: min(1180px, 92vw);
  max-height: 78vh;
  object-fit: contain;
}

.image-dialog p {
  margin: 0;
  padding: 14px 18px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 11px;
}

.dialog-close {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(8, 27, 41, 0.7);
  color: #fff;
  font-size: 24px;
}

@media (max-width: 1180px) {
  .global-header {
    grid-template-columns: 250px 1fr auto;
  }

  .brand {
    width: 240px;
  }

  .workspace-grid {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .workspace-grid .evidence-panel {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
  }

  .workspace-grid .evidence-panel h2,
  .workspace-grid .evidence-panel .micro-label,
  .workspace-grid .evidence-panel .priority {
    grid-column: 1 / -1;
  }

  .decision-item {
    margin-top: 0;
  }

  .sample-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .evidence-flow {
    grid-template-columns: repeat(3, 1fr);
  }

  .evidence-flow button::after {
    display: none;
  }

  .inversion-layout {
    grid-template-columns: 235px minmax(0, 1fr);
  }

  .inversion-result-panel {
    position: static;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 14px;
  }

  .inversion-result-panel > .micro-label,
  .inversion-result-panel > h2,
  .inversion-result-panel > .diagnostic-primary,
  .inversion-result-panel > .uncertainty-card,
  .inversion-result-panel > .decision-item {
    grid-column: 1 / -1;
  }

  .capability-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .permission-overview {
    grid-template-columns: 280px 1fr;
  }

  .permission-overview > p {
    grid-column: 1 / -1;
  }

  .remote-browser {
    grid-template-columns: 245px minmax(0, 1fr);
  }

  .remote-inspector {
    position: static;
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .global-header {
    grid-template-columns: 1fr auto;
    padding-top: 6px;
  }

  .portal-switch {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    overflow-x: auto;
    padding: 3px 0 7px;
  }

  .portal-switch button {
    min-width: max-content;
  }

  .context-bar {
    top: 118px;
    grid-template-columns: 1fr auto;
  }

  .context-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    overflow-x: auto;
  }

  .context-nav button {
    min-width: max-content;
  }

  .portal-grid,
  .feature-hero,
  .assistant-layout,
  .remote-layout,
  .remote-browser,
  .case-intro,
  .report-layout,
  .gov-grid {
    grid-template-columns: 1fr;
  }

  .portal-grid {
    margin-top: -34px;
  }

  .platform-principles {
    grid-template-columns: 1fr 1fr;
  }

  .permission-overview {
    grid-template-columns: 1fr;
  }

  .permission-overview > p {
    grid-column: auto;
  }

  .capability-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .feature-image,
  .case-photo {
    min-height: 420px;
  }

  .data-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .metric-row,
  .workflow-row {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .workspace-grid .evidence-panel {
    grid-column: auto;
  }

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

  .inversion-control,
  .inversion-result-panel,
  .remote-browser-controls,
  .remote-inspector {
    position: static;
  }

  .inversion-mode-list {
    grid-template-columns: repeat(3, 1fr);
  }

  #inversionCanvas {
    min-height: 430px;
  }
}

@media (max-width: 640px) {
  .global-header {
    min-height: 104px;
    padding-inline: 16px;
  }

  .brand {
    width: 205px;
  }

  .demo-state span {
    display: none;
  }

  .context-bar {
    top: 104px;
    padding-inline: 16px;
  }

  .page,
  .landing-copy,
  .portal-grid,
  .platform-principles {
    width: calc(100% - 28px);
  }

  .page {
    padding-top: 38px;
  }

  .landing-hero {
    min-height: 560px;
  }

  .landing-copy {
    padding-top: 78px;
  }

  .landing-copy h1 {
    font-size: 50px;
  }

  .landing-copy > p:not(.eyebrow) {
    font-size: 15px;
  }

  .portal-grid,
  .platform-principles,
  .permission-overview,
  .capability-grid,
  .sample-grid,
  .data-grid,
  .metric-row,
  .workflow-row,
  .evidence-flow,
  .workspace-grid .evidence-panel {
    grid-template-columns: 1fr;
  }

  .portal-card {
    min-height: 240px;
  }

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

  .permission-overview {
    margin-top: -28px;
    padding: 22px;
  }

  .page-heading,
  .section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .section-head p {
    text-align: left;
  }

  .quick-questions,
  .lens-row,
  .gov-tabs {
    grid-template-columns: 1fr 1fr;
  }

  .feature-copy,
  .case-copy {
    padding: 32px 24px;
  }

  .feature-image,
  .case-photo {
    min-height: 340px;
  }

  .map-stage,
  .gov-map,
  .remote-viewport {
    height: 470px;
  }

  .remote-map-toolbar {
    align-items: flex-start;
    flex-direction: column;
    padding: 14px;
  }

  .map-tools {
    width: 100%;
  }

  .report-preview {
    grid-template-columns: 1fr;
  }

  .report-preview img {
    width: 100%;
    height: 300px;
  }

  .inversion-mode-list,
  .inversion-input-grid,
  .inversion-steps,
  .inversion-result-panel {
    grid-template-columns: 1fr;
  }

  #inversionCanvas {
    min-height: 360px;
  }

  .canvas-status {
    right: 12px;
    max-width: none;
  }

  .risk-list article {
    grid-template-columns: 80px 1fr;
  }

  .risk-list span {
    grid-column: 1 / -1;
    width: fit-content;
  }

  .global-footer {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .landing-hero > img,
  .portal-card,
  .page > *,
  .canvas-scan.active,
  .live-indicator.running i {
    animation: none !important;
  }
}

/* Homepage narrative redesign */

.home-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.4vw, 38px);
}

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

.home-nav button {
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: #4f687b;
  font-size: 14px;
  transition: color 180ms ease;
}

.home-nav button:hover {
  color: var(--blue);
}

.account-menu {
  position: relative;
  justify-self: end;
}

.account-menu summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 188px;
  padding: 9px 12px;
  border: 1px solid #d6e2e8;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  list-style: none;
}

.account-menu summary::-webkit-details-marker {
  display: none;
}

.account-menu summary strong {
  color: var(--ink-2);
  font-size: 13px;
}

.account-menu summary i {
  margin-left: auto;
  font-style: normal;
  transition: transform 180ms ease;
}

.account-menu[open] summary i {
  transform: rotate(180deg);
}

.account-options {
  position: absolute;
  z-index: 80;
  top: calc(100% + 10px);
  right: 0;
  display: grid;
  gap: 4px;
  width: 272px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 60px rgba(16, 40, 61, 0.16);
  backdrop-filter: blur(18px);
}

.account-options button {
  padding: 11px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-2);
  text-align: left;
}

.account-options button:hover,
.account-options button.active {
  background: #edf5f8;
}

.account-options strong,
.account-options small {
  display: block;
}

.account-options strong {
  font-size: 13px;
}

.account-options small {
  margin-top: 3px;
  color: var(--faint);
  font-size: 11px;
}

.home-hero {
  min-height: 720px;
}

.home-hero::after {
  background:
    linear-gradient(90deg, rgba(7, 28, 45, 0.9) 0%, rgba(8, 36, 55, 0.72) 45%, rgba(8, 36, 55, 0.12) 82%),
    linear-gradient(0deg, rgba(7, 27, 42, 0.72) 0%, transparent 44%);
}

.home-hero .landing-copy {
  padding-top: 125px;
}

.home-hero .landing-copy h1 {
  max-width: 1020px;
  font-size: clamp(55px, 6.7vw, 100px);
}

.home-hero .landing-copy h1 span {
  color: #c4eef3;
}

.home-hero .landing-copy > p:not(.eyebrow) {
  max-width: 760px;
  font-size: clamp(17px, 1.45vw, 21px);
}

.hero-primary {
  border-color: #fff;
  background: #fff;
  color: #123f5b;
}

.hero-primary:hover {
  border-color: #d7f4f6;
  background: #d7f4f6;
}

.hero-secondary {
  border-color: rgba(255, 255, 255, 0.48);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  backdrop-filter: blur(8px);
}

.hero-secondary:hover {
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.15);
}

.home-hero .hero-note {
  bottom: 92px;
  font-size: 11px;
}

.hero-capability-line {
  position: absolute;
  z-index: 4;
  right: 4vw;
  bottom: 0;
  left: 4vw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.4vw, 36px);
  min-height: 70px;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.84);
  font-size: 14px;
  letter-spacing: 0.04em;
}

.hero-capability-line i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #6ed7e3;
}

.home-meaning,
.home-capabilities,
.home-method {
  scroll-margin-top: 100px;
}

.home-meaning {
  width: min(1240px, calc(100% - 8vw));
  margin: 0 auto;
  padding: 120px 0 110px;
}

.home-section-heading {
  max-width: 960px;
}

.home-section-heading h2 {
  margin: 0;
  font-size: clamp(38px, 4.7vw, 68px);
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 1.08;
}

.home-section-heading > p:not(.eyebrow) {
  max-width: 820px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.85;
}

.meaning-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
  margin-top: 72px;
}

.meaning-grid article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  padding-top: 24px;
  border-top: 1px solid var(--line-strong);
}

.meaning-grid article > b {
  color: var(--blue);
  font-family: Georgia, "Songti SC", "SimSun", serif;
  font-size: 38px;
  font-weight: 500;
  line-height: 1;
}

.meaning-grid article:last-child > b {
  font-family: inherit;
  font-size: 20px;
  font-weight: 760;
}

.meaning-grid strong {
  display: block;
  font-size: 19px;
  line-height: 1.45;
}

.meaning-grid p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
}

.brand-definition {
  display: flex;
  align-items: baseline;
  gap: 22px;
  margin: 70px 0 0;
  padding: 25px 0 0;
  border-top: 1px solid var(--line);
}

.brand-definition strong {
  color: var(--blue);
  font-size: 21px;
}

.brand-definition span {
  color: var(--ink-2);
  font-size: 16px;
}

.home-system {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(60px, 8vw, 130px);
  padding: 105px 8vw;
  background:
    radial-gradient(circle at 82% 16%, rgba(53, 173, 198, 0.18), transparent 32rem),
    linear-gradient(135deg, #0c2d43, #123f58 58%, #184e63);
  color: #fff;
}

.home-system-copy h2 {
  max-width: 600px;
  margin: 0;
  font-size: clamp(38px, 4vw, 61px);
  font-weight: 620;
  letter-spacing: -0.045em;
  line-height: 1.1;
}

.home-system-copy .eyebrow {
  color: #6ed7e3;
}

.home-system-copy > p:not(.eyebrow) {
  max-width: 600px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 17px;
  line-height: 1.9;
}

.system-journey {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

.system-journey article {
  min-height: 240px;
  padding: 32px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}

.system-journey article > span {
  color: #6ed7e3;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.system-journey strong {
  display: block;
  margin-top: 36px;
  font-size: 30px;
  font-weight: 610;
}

.system-journey p {
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
  line-height: 2;
}

.system-journey > i {
  color: #6ed7e3;
  font-size: 22px;
  font-style: normal;
}

.home-capabilities {
  width: min(1320px, calc(100% - 8vw));
  margin: 0 auto;
  padding: 125px 0 70px;
}

.capability-heading {
  margin-bottom: 45px;
}

.capability-story {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  align-items: center;
  gap: clamp(55px, 7vw, 110px);
  padding: 76px 0;
  border-top: 1px solid var(--line);
}

.capability-story.reverse .capability-visual {
  order: 2;
}

.capability-visual {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border-radius: 24px;
  background: #d9e5e9;
  box-shadow: 0 26px 70px rgba(23, 57, 78, 0.12);
}

.capability-visual > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.capability-visual::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(5, 29, 44, 0.62), transparent 46%);
  content: "";
  pointer-events: none;
}

.capability-visual figure {
  position: absolute;
  z-index: 3;
  right: 24px;
  bottom: 24px;
  width: 38%;
  margin: 0;
  overflow: hidden;
  border: 5px solid rgba(255, 255, 255, 0.88);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(8, 30, 45, 0.24);
}

.capability-visual figure img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.capability-visual figcaption {
  padding: 8px 10px;
  color: var(--ink-2);
  font-size: 11px;
}

.visual-label {
  position: absolute;
  z-index: 4;
  bottom: 30px;
  left: 30px;
  max-width: 48%;
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.capability-copy > span {
  color: var(--blue-2);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.16em;
}

.capability-copy h3 {
  margin: 17px 0 0;
  font-size: clamp(38px, 4.3vw, 61px);
  font-weight: 640;
  letter-spacing: -0.045em;
}

.capability-copy > p {
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.85;
}

.capability-copy ul {
  display: grid;
  gap: 13px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.capability-copy li {
  position: relative;
  padding-left: 19px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.6;
}

.capability-copy li::before {
  position: absolute;
  top: 0.68em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  content: "";
}

.evidence-overlay {
  position: absolute;
  z-index: 4;
  right: 24px;
  bottom: 24px;
  left: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px 18px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  background: rgba(8, 34, 49, 0.76);
  color: #fff;
  backdrop-filter: blur(12px);
}

.evidence-overlay span {
  font-size: 11px;
  text-align: center;
}

.evidence-overlay b {
  width: 19px;
  height: 1px;
  background: #6ed7e3;
}

.home-case {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  background: #0b2a3e;
  color: #fff;
  scroll-margin-top: 100px;
}

.home-case-copy {
  align-self: center;
  padding: 100px 7vw 90px 8vw;
}

.home-case-copy .eyebrow {
  color: #6ed7e3;
}

.home-case-copy h2 {
  margin: 0;
  font-size: clamp(47px, 5.4vw, 79px);
  font-weight: 620;
  letter-spacing: -0.05em;
  line-height: 1.05;
}

.home-case-copy > p:not(.eyebrow) {
  max-width: 600px;
  margin: 28px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 17px;
  line-height: 1.9;
}

.home-case-copy blockquote {
  max-width: 600px;
  margin: 32px 0;
  padding: 0 0 0 20px;
  border-left: 2px solid #61cedd;
  color: #d1e7ed;
  font-size: 14px;
  line-height: 1.9;
}

.home-case-image {
  position: relative;
  min-height: 670px;
  margin: 0;
  overflow: hidden;
}

.home-case-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.02);
}

.home-case-image::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11, 42, 62, 0.35), transparent 45%);
  content: "";
}

.home-case-image figcaption {
  position: absolute;
  z-index: 4;
  right: 24px;
  bottom: 24px;
  padding: 7px 10px;
  border-radius: 6px;
  background: rgba(7, 27, 40, 0.7);
  color: rgba(255, 255, 255, 0.78);
  font-size: 10px;
  backdrop-filter: blur(8px);
}

.case-point {
  position: absolute;
  z-index: 4;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: 999px;
  background: rgba(7, 34, 49, 0.7);
  color: #fff;
  font-size: 11px;
  backdrop-filter: blur(10px);
}

.case-point::before {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: #6ed7e3;
  box-shadow: 0 0 0 5px rgba(110, 215, 227, 0.18);
  content: "";
}

.case-point.one { top: 22%; left: 20%; }
.case-point.two { top: 48%; right: 18%; }
.case-point.three { bottom: 24%; left: 36%; }

.case-evidence-strip {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 48px);
  min-height: 94px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
}

.case-evidence-strip b {
  margin-right: 8px;
  color: #6ed7e3;
  font-size: 10px;
}

.case-evidence-strip i {
  width: 55px;
  height: 1px;
  background: rgba(110, 215, 227, 0.5);
}

.home-method {
  width: min(1320px, calc(100% - 8vw));
  margin: 0 auto;
  padding: 125px 0 115px;
}

.method-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-top: 70px;
}

.method-flow article {
  padding-top: 23px;
  border-top: 2px solid var(--line-strong);
}

.method-flow article:first-child {
  border-color: var(--blue);
}

.method-flow b {
  color: var(--blue-2);
  font-size: 11px;
  letter-spacing: 0.14em;
}

.method-flow strong {
  display: block;
  margin-top: 31px;
  font-size: 21px;
}

.method-flow p {
  margin: 13px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}

.method-boundary {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 28px;
  margin-top: 72px;
  padding: 28px 30px;
  border-left: 3px solid var(--jade);
  background: #edf5f2;
}

.method-boundary strong {
  color: var(--jade);
  font-size: 16px;
}

.method-boundary p {
  margin: 0;
  color: #4e7165;
  font-size: 15px;
  line-height: 1.75;
}

.home-final {
  display: grid;
  place-items: center;
  min-height: 510px;
  padding: 90px 4vw;
  background:
    radial-gradient(circle at 50% 0%, rgba(70, 182, 201, 0.14), transparent 30rem),
    linear-gradient(180deg, #f5f9fa, #fff);
  text-align: center;
}

.home-final .eyebrow,
.home-final h2,
.home-final > p,
.home-final .button-row {
  grid-column: 1;
}

.home-final h2 {
  margin: 0;
  font-size: clamp(48px, 5.5vw, 80px);
  font-weight: 630;
  letter-spacing: -0.055em;
  line-height: 1.06;
}

.home-final > p:not(.eyebrow) {
  max-width: 680px;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.8;
}

.home-final .button-row {
  justify-content: center;
  margin-top: 30px;
}

@media (max-width: 1180px) {
  .home-system {
    grid-template-columns: 1fr;
  }

  .capability-story {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.86fr);
    gap: 50px;
  }

  .capability-visual {
    min-height: 460px;
  }
}

@media (max-width: 900px) {
  .global-header {
    min-height: 78px;
  }

  .home-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 7px;
  }

  .home-nav button {
    min-width: max-content;
  }

  .context-bar {
    top: 78px;
  }

  .context-bar.home-context {
    position: relative;
    top: auto;
  }

  .home-hero {
    min-height: 650px;
  }

  .home-hero .landing-copy {
    padding-top: 105px;
  }

  .meaning-grid,
  .method-flow {
    grid-template-columns: repeat(2, 1fr);
  }

  .meaning-grid article:last-child {
    grid-column: 1 / -1;
  }

  .system-journey {
    gap: 14px;
  }

  .system-journey article {
    min-height: 210px;
  }

  .system-journey strong {
    font-size: 24px;
  }

  .capability-story,
  .home-case {
    grid-template-columns: 1fr;
  }

  .capability-story.reverse .capability-visual {
    order: 0;
  }

  .capability-copy {
    max-width: 720px;
  }

  .home-case-image {
    min-height: 560px;
  }

  .home-case-copy {
    padding: 85px 7vw 70px;
  }
}

@media (max-width: 640px) {
  .global-header {
    min-height: 72px;
    padding: 6px 14px;
  }

  .brand {
    width: 176px;
  }

  .account-menu summary {
    min-width: 126px;
    padding-inline: 9px;
  }

  .account-menu summary > span {
    display: none;
  }

  .account-options {
    width: 250px;
  }

  .context-bar {
    top: 72px;
  }

  .home-hero {
    min-height: 620px;
  }

  .home-hero .landing-copy {
    padding-top: 90px;
  }

  .home-hero .landing-copy h1 {
    font-size: 47px;
  }

  .home-hero .landing-copy > p:not(.eyebrow) {
    font-size: 16px;
  }

  .home-hero .hero-note {
    display: none;
  }

  .hero-capability-line {
    gap: 9px;
    right: 14px;
    left: 14px;
    min-height: 64px;
    font-size: 11px;
  }

  .home-meaning,
  .home-capabilities,
  .home-method {
    width: calc(100% - 28px);
  }

  .home-meaning {
    padding: 88px 0 75px;
  }

  .home-section-heading h2 {
    font-size: 39px;
  }

  .home-section-heading > p:not(.eyebrow) {
    font-size: 16px;
  }

  .meaning-grid,
  .method-flow {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .meaning-grid article:last-child {
    grid-column: auto;
  }

  .brand-definition,
  .method-boundary {
    align-items: flex-start;
    flex-direction: column;
    grid-template-columns: 1fr;
  }

  .home-system {
    padding: 78px 24px;
  }

  .system-journey {
    grid-template-columns: 1fr;
  }

  .system-journey article {
    min-height: 0;
    padding-bottom: 22px;
  }

  .system-journey > i {
    transform: rotate(90deg);
  }

  .home-capabilities {
    padding-top: 88px;
  }

  .capability-story {
    gap: 38px;
    padding: 55px 0;
  }

  .capability-visual {
    min-height: 390px;
    border-radius: 18px;
  }

  .capability-visual figure {
    width: 43%;
    right: 14px;
    bottom: 14px;
  }

  .capability-visual figure img {
    height: 105px;
  }

  .visual-label {
    bottom: 19px;
    left: 18px;
    font-size: 11px;
  }

  .evidence-overlay {
    right: 12px;
    bottom: 12px;
    left: 12px;
    flex-wrap: wrap;
  }

  .capability-copy h3 {
    font-size: 42px;
  }

  .home-case-copy {
    padding: 74px 24px 62px;
  }

  .home-case-copy h2 {
    font-size: 49px;
  }

  .home-case-image {
    min-height: 430px;
  }

  .case-point {
    font-size: 10px;
  }

  .case-evidence-strip {
    flex-wrap: wrap;
    gap: 14px 22px;
    padding: 22px 18px;
  }

  .case-evidence-strip i {
    display: none;
  }

  .home-method {
    padding: 88px 0 80px;
  }

  .method-flow {
    margin-top: 50px;
  }

  .home-final {
    min-height: 460px;
    padding-inline: 20px;
  }

  .home-final h2 {
    font-size: 50px;
  }
}

/* Homepage v2: product proof, service model and a shorter narrative */

.home-overview,
.home-workbench,
.home-service {
  scroll-margin-top: 96px;
}

.ai-capability-line {
  letter-spacing: 0.08em;
}

.home-overview {
  width: min(1320px, calc(100% - 8vw));
  margin: 0 auto;
  padding: 115px 0 105px;
}

.overview-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  align-items: end;
  gap: clamp(55px, 8vw, 130px);
}

.overview-intro h2 {
  max-width: 780px;
  margin: 0;
  font-size: clamp(42px, 5.2vw, 75px);
  font-weight: 640;
  letter-spacing: -0.05em;
  line-height: 1.08;
}

.overview-intro > div:last-child > p {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.9;
}

.overview-intro > div:last-child > p + p {
  margin-top: 18px;
}

.overview-intro p strong {
  color: var(--blue);
  font-size: 20px;
}

.overview-journey {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: clamp(15px, 2.2vw, 34px);
  margin-top: 78px;
  padding: 38px 42px;
  border-radius: 20px;
  background: linear-gradient(135deg, #0d3046, #174c62);
  box-shadow: 0 24px 60px rgba(20, 60, 81, 0.13);
  color: #fff;
}

.overview-journey article {
  min-width: 0;
}

.overview-journey article > span {
  color: #6ed7e3;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.15em;
}

.overview-journey strong {
  display: block;
  margin-top: 17px;
  font-size: 25px;
  font-weight: 620;
}

.overview-journey p {
  margin: 13px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  line-height: 1.75;
}

.overview-journey > i {
  color: #68d1df;
  font-size: 24px;
  font-style: normal;
}

.capability-proof-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
  margin-top: 28px;
  padding: 30px 34px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #fff;
}

.capability-proof-strip article + article {
  padding-left: 34px;
  border-left: 1px solid var(--line);
}

.capability-proof-strip span {
  color: var(--blue-2);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.13em;
}

.capability-proof-strip strong {
  display: block;
  margin-top: 10px;
  font-size: 16px;
}

.capability-proof-strip p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.world-model-roadmap {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 23px 0 0;
  padding: 15px 18px;
  border-left: 3px solid var(--cyan);
  background: #edf7f8;
  color: #4b6b77;
  font-size: 13px;
  line-height: 1.7;
}

.world-model-roadmap b {
  flex: 0 0 auto;
  color: var(--blue);
}

.world-model-roadmap span {
  width: 1px;
  height: 22px;
  margin-inline: 5px;
  background: #bfd7de;
}

.home-workbench {
  padding: 115px 4vw 105px;
  background:
    radial-gradient(circle at 90% 0%, rgba(16, 159, 190, 0.08), transparent 28rem),
    #edf3f6;
}

.workbench-heading {
  width: min(1320px, 100%);
  margin: 0 auto 50px;
}

.workbench-shell {
  width: min(1500px, 100%);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #cbdbe3;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(20, 57, 78, 0.13);
}

.workbench-topbar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 22px;
  min-height: 66px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
  background: #fbfdfe;
}

.workbench-topbar > div {
  display: flex;
  align-items: center;
  gap: 11px;
}

.workbench-topbar img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.workbench-topbar strong {
  font-size: 14px;
}

.workbench-topbar span,
.workbench-topbar b {
  color: var(--faint);
  font-size: 11px;
}

.workbench-topbar b {
  padding: 7px 9px;
  border-radius: 999px;
  background: #edf6f8;
  color: var(--blue);
}

.workbench-body {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) 340px;
  min-height: 610px;
}

.workbench-tools {
  padding: 22px 14px;
  border-right: 1px solid var(--line);
  background: #f8fbfc;
}

.workbench-tools > span {
  display: block;
  margin: 0 8px 14px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.workbench-tools button {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  transition: 160ms ease;
}

.workbench-tools button:hover,
.workbench-tools button.active {
  background: #e6f1f5;
  color: var(--blue);
}

.workbench-tools button > b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #fff;
  color: var(--blue-2);
  font-size: 10px;
  box-shadow: 0 2px 8px rgba(23, 63, 84, 0.06);
}

.workbench-tools button > span {
  font-size: 12px;
  line-height: 1.35;
}

.tool-separator {
  height: 1px;
  margin: 17px 8px;
  background: var(--line);
}

.workbench-tools small {
  display: block;
  padding: 0 8px;
  color: var(--faint);
  font-size: 10px;
  line-height: 1.6;
}

.workbench-map {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #bbc9ce;
}

.workbench-map > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 180ms ease;
}

.workbench-map::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(6, 27, 40, 0.36), transparent 36%);
  content: "";
  pointer-events: none;
}

.preview-gridlines {
  position: absolute;
  z-index: 2;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 16.666% 16.666%;
  pointer-events: none;
}

.preview-layer-name,
.preview-coordinate {
  position: absolute;
  z-index: 4;
  padding: 7px 9px;
  border-radius: 6px;
  background: rgba(7, 30, 44, 0.72);
  color: #fff;
  font-size: 11px;
  backdrop-filter: blur(8px);
}

.preview-layer-name { top: 14px; left: 14px; }
.preview-coordinate { right: 14px; bottom: 14px; }

.preview-target {
  position: absolute;
  z-index: 4;
  width: 76px;
  height: 52px;
  border: 2px solid #ffdf77;
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(255, 223, 119, 0.13);
  transform: rotate(-18deg);
}

.preview-target b {
  position: absolute;
  top: -12px;
  right: -10px;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: #ffdf77;
  color: #574719;
  font-size: 10px;
  font-style: normal;
}

.preview-target.target-a { top: 34%; left: 31%; }
.preview-target.target-b { right: 20%; bottom: 24%; transform: rotate(16deg) scale(0.78); }

.preview-map-scale {
  position: absolute;
  z-index: 4;
  bottom: 17px;
  left: 15px;
  color: #fff;
  font-size: 10px;
}

.preview-map-scale b {
  display: block;
  width: 88px;
  height: 6px;
  margin-bottom: 5px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
}

.workbench-evidence {
  padding: 26px 24px;
  border-left: 1px solid var(--line);
  background: #fff;
}

.workbench-evidence h3 {
  margin: 8px 0 0;
  font-size: 21px;
  line-height: 1.35;
}

.preview-source {
  margin: 8px 0 0;
  color: var(--faint);
  font-size: 11px;
  line-height: 1.5;
}

.preview-evidence-bars {
  margin-top: 26px;
  padding-top: 21px;
  border-top: 1px solid var(--line);
}

.preview-evidence-bars label {
  display: grid;
  grid-template-columns: 112px 1fr 25px;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 11px;
}

.preview-evidence-bars label:first-child {
  margin-top: 0;
}

.preview-evidence-bars i {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #e4edf1;
}

.preview-evidence-bars i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
}

.preview-evidence-bars label > strong {
  color: var(--ink-2);
  font-size: 11px;
  text-align: right;
}

.preview-finding,
.preview-next {
  margin-top: 25px;
  padding: 15px;
  border-radius: 10px;
}

.preview-finding {
  border-left: 3px solid var(--jade);
  background: #edf6f2;
}

.preview-next {
  background: #eef5f9;
}

.preview-finding > span,
.preview-next > span {
  color: var(--jade);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.1em;
}

.preview-next > span {
  color: var(--blue-2);
}

.preview-finding p {
  margin: 8px 0 0;
  color: #4e7065;
  font-size: 12px;
  line-height: 1.7;
}

.preview-next strong,
.preview-next small {
  display: block;
}

.preview-next strong {
  margin-top: 8px;
  font-size: 13px;
}

.preview-next small {
  margin-top: 6px;
  color: var(--faint);
  font-size: 10px;
  line-height: 1.5;
}

.workbench-status {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: #fbfdfe;
}

.workbench-status span {
  color: var(--muted);
  font-size: 11px;
}

.workbench-status i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: #4fa37d;
}

.three-abilities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 45px;
  width: min(1320px, 100%);
  margin: 58px auto 0;
}

.three-abilities article {
  padding-top: 24px;
  border-top: 2px solid #c6d8e1;
}

.three-abilities article:first-child {
  border-color: var(--blue);
}

.three-abilities article > span {
  color: var(--blue-2);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.14em;
}

.three-abilities strong {
  display: block;
  margin-top: 20px;
  font-size: 22px;
}

.three-abilities p {
  margin: 11px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}

.three-abilities button {
  margin-top: 17px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--blue);
  font-size: 12px;
  font-weight: 750;
}

.compact-home-case {
  grid-template-columns: 0.78fr 1.22fr;
}

.compact-home-case .home-case-copy {
  padding-block: 88px;
}

.compact-home-case .home-case-image {
  min-height: 590px;
}

.compact-home-case .home-case-copy .primary-button {
  margin-top: 31px;
}

.case-output-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.case-output-strip article {
  min-height: 150px;
  padding: 28px clamp(25px, 4vw, 70px);
}

.case-output-strip article + article {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.case-output-strip span {
  color: #6ed7e3;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.case-output-strip p {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.75;
}

.home-service {
  width: min(1320px, calc(100% - 8vw));
  margin: 0 auto;
  padding: 120px 0 105px;
}

.service-heading {
  max-width: 1000px;
}

.service-paths {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 38px;
  margin-top: 68px;
}

.service-paths article {
  position: relative;
  min-height: 245px;
  padding: 25px 0 44px;
  border-top: 2px solid var(--line-strong);
}

.service-paths article:first-child {
  border-color: var(--blue);
}

.service-paths b {
  color: var(--blue-2);
  font-size: 11px;
  letter-spacing: 0.14em;
}

.service-paths strong {
  display: block;
  margin-top: 30px;
  font-size: 23px;
}

.service-paths p {
  margin: 13px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}

.service-paths span {
  position: absolute;
  bottom: 0;
  left: 0;
  color: var(--faint);
  font-size: 11px;
}

.traceable-workflow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(13px, 2vw, 30px);
  margin-top: 65px;
  padding: 25px 28px;
  border-radius: 14px;
  background: #102f43;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
}

.traceable-workflow strong {
  margin-right: auto;
  color: #fff;
  font-size: 16px;
}

.traceable-workflow i {
  color: #6ed7e3;
  font-style: normal;
}

.trust-principles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.trust-principles span {
  padding: 9px 13px;
  border: 1px solid #d5e2e8;
  border-radius: 999px;
  background: #f7fafb;
  color: var(--ink-2);
  font-size: 12px;
}

.service-boundary {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 28px;
  margin-top: 25px;
  padding: 25px 28px;
  border-left: 3px solid var(--jade);
  background: #edf5f2;
}

.service-boundary strong {
  color: var(--jade);
  font-size: 15px;
}

.service-boundary p {
  margin: 0;
  color: #4e7064;
  font-size: 14px;
  line-height: 1.75;
}

.service-cta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 35px;
  margin-top: 85px;
  padding-top: 54px;
  border-top: 1px solid var(--line);
}

.service-cta h3 {
  margin: 0;
  font-size: clamp(38px, 4vw, 59px);
  font-weight: 640;
  letter-spacing: -0.045em;
}

.service-cta .button-row {
  flex: 0 0 auto;
}

@media (max-width: 1120px) {
  .workbench-body {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  .workbench-evidence {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 0.8fr 1fr 1fr;
    gap: 20px;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .workbench-evidence > .micro-label,
  .workbench-evidence > h3,
  .workbench-evidence > .preview-source {
    grid-column: 1;
  }

  .preview-evidence-bars {
    grid-column: 2;
    grid-row: 1 / 5;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .preview-finding,
  .preview-next {
    grid-column: 3;
    margin-top: 0;
  }
}

@media (max-width: 900px) {
  .overview-intro {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .overview-intro > div:last-child {
    max-width: 760px;
  }

  .overview-journey {
    grid-template-columns: 1fr;
  }

  .overview-journey > i {
    transform: rotate(90deg);
  }

  .capability-proof-strip,
  .three-abilities,
  .case-output-strip,
  .service-paths {
    grid-template-columns: repeat(2, 1fr);
  }

  .capability-proof-strip article:last-child,
  .case-output-strip article:last-child {
    grid-column: 1 / -1;
  }

  .capability-proof-strip article:last-child {
    padding-top: 24px;
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .compact-home-case {
    grid-template-columns: 1fr;
  }

  .case-output-strip article:nth-child(3) {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-left: 0;
  }

  .traceable-workflow {
    flex-wrap: wrap;
  }

  .traceable-workflow strong {
    flex-basis: 100%;
    margin-right: 0;
    text-align: center;
  }

  .service-cta {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  .workbench-body {
    grid-template-columns: 1fr;
  }

  .workbench-tools {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .workbench-tools > span,
  .workbench-tools .tool-separator,
  .workbench-tools small {
    grid-column: 1 / -1;
  }

  .workbench-map {
    min-height: 520px;
  }

  .workbench-evidence {
    display: block;
  }

  .preview-evidence-bars,
  .preview-finding,
  .preview-next {
    margin-top: 22px;
  }

  .workbench-status {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .home-overview,
  .home-service {
    width: calc(100% - 28px);
  }

  .home-overview {
    padding: 85px 0 78px;
  }

  .overview-intro {
    gap: 36px;
  }

  .overview-intro h2 {
    font-size: 41px;
  }

  .overview-intro > div:last-child > p {
    font-size: 15px;
  }

  .overview-journey {
    margin-top: 50px;
    padding: 28px 24px;
  }

  .capability-proof-strip,
  .three-abilities,
  .case-output-strip,
  .service-paths {
    grid-template-columns: 1fr;
  }

  .capability-proof-strip {
    padding: 25px;
  }

  .capability-proof-strip article + article {
    padding-top: 22px;
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .world-model-roadmap {
    align-items: flex-start;
    flex-direction: column;
  }

  .world-model-roadmap span {
    width: 100%;
    height: 1px;
    margin: 2px 0;
  }

  .home-workbench {
    padding: 82px 14px 76px;
  }

  .workbench-topbar {
    grid-template-columns: 1fr auto;
  }

  .workbench-topbar > span {
    display: none;
  }

  .workbench-map {
    min-height: 430px;
  }

  .three-abilities {
    gap: 33px;
  }

  .case-output-strip article,
  .case-output-strip article + article,
  .case-output-strip article:nth-child(3) {
    min-height: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-left: 0;
  }

  .home-service {
    padding: 85px 0 75px;
  }

  .service-paths {
    gap: 28px;
    margin-top: 48px;
  }

  .service-paths article {
    min-height: 205px;
  }

  .traceable-workflow {
    justify-content: flex-start;
    padding: 22px;
  }

  .traceable-workflow strong {
    text-align: left;
  }

  .trust-principles {
    justify-content: flex-start;
  }

  .service-boundary {
    grid-template-columns: 1fr;
  }

  .service-cta {
    margin-top: 65px;
  }

  .service-cta h3 {
    font-size: 42px;
  }
}

/* Remote sensing formula builder */

.formula-presets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 13px;
}

.formula-presets button {
  min-height: 34px;
  padding: 6px 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.formula-presets button:hover,
.formula-presets button.active {
  border-color: #8eb9cd;
  background: #eaf5f8;
  color: var(--blue);
}

.formula-presets button:disabled,
.band-token-list button:disabled,
.formula-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.band-token-list {
  margin-top: 15px;
}

.band-token-list > span,
.formula-input > span {
  display: block;
  color: var(--faint);
  font-size: 10px;
  font-weight: 780;
}

.band-token-list > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-top: 7px;
}

.band-token-list button {
  min-width: 0;
  padding: 6px 3px;
  border: 1px solid #d7e3e8;
  border-radius: 6px;
  background: #f8fbfc;
  color: var(--ink-2);
}

.band-token-list button:hover {
  border-color: #95bdcf;
  background: #eef7fa;
}

.band-token-list b,
.band-token-list small {
  display: block;
}

.band-token-list b {
  color: var(--blue);
  font-size: 11px;
}

.band-token-list small {
  margin-top: 2px;
  color: var(--faint);
  font-size: 9px;
  line-height: 1.2;
}

.formula-input {
  display: block;
  margin-top: 14px;
}

.formula-input input {
  width: 100%;
  height: 40px;
  margin-top: 7px;
  padding: 0 10px;
  border: 1px solid #cddde5;
  border-radius: 7px;
  background: #fff;
  color: #174862;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
}

.formula-input input:focus {
  border-color: var(--cyan);
  outline: 3px solid rgba(9, 169, 197, 0.12);
}

.formula-actions {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
}

.formula-actions button {
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid #bad0da;
  border-radius: 6px;
  background: #fff;
  color: var(--blue);
  font-size: 10px;
  font-weight: 750;
}

.formula-actions span {
  color: var(--faint);
  font-size: 10px;
  line-height: 1.35;
}

/* Surface–subsurface 3D inversion */

.home-v2 .overview-intro h2 {
  font-size: clamp(34px, 3.8vw, 55px);
}

.three-d-inversion-center {
  display: grid;
  gap: 18px;
}

.surface-model-panel,
.volume-model-panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.surface-model-panel .panel-toolbar > div,
.volume-model-panel .panel-toolbar > div,
.vertical-section-panel .panel-toolbar > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.model-zone-tag {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 9px !important;
  font-weight: 850;
}

.model-zone-tag.surface {
  background: #edf5e9;
  color: #53784a;
}

.model-zone-tag.subsurface {
  background: #e9f4f8;
  color: var(--blue);
}

.model-zone-tag.section {
  background: #fff3d9;
  color: #8b681f;
}

.surface-model-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 255px;
  min-height: 370px;
}

.surface-map-stage {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #c9d4cf;
}

.surface-map-stage > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.83) contrast(0.98);
}

.surface-map-stage::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px);
  background-size: 20% 25%;
  content: "";
  pointer-events: none;
}

.surface-survey-line {
  position: absolute;
  z-index: 3;
  left: 12%;
  width: 76%;
  height: 2px;
  background: #f8dc67;
  box-shadow: 0 0 0 1px rgba(79, 57, 13, 0.23);
  transform-origin: center;
}

.surface-survey-line.line-one { top: 43%; transform: rotate(-15deg); }
.surface-survey-line.line-two { top: 63%; transform: rotate(9deg); }

.surface-survey-line b {
  position: absolute;
  top: -19px;
  padding: 3px 5px;
  border-radius: 4px;
  background: rgba(15, 43, 57, 0.72);
  color: #fff;
  font-size: 9px;
}

.surface-survey-line b:first-child { left: 0; }
.surface-survey-line b:last-child { right: 0; }

.surface-collar {
  position: absolute;
  z-index: 4;
  width: 14px;
  height: 14px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #c0544d;
  box-shadow: 0 0 0 5px rgba(192, 84, 77, 0.19);
}

.surface-collar::after {
  position: absolute;
  top: 12px;
  left: -5px;
  width: 18px;
  color: #fff;
  font-size: 8px;
  font-style: normal;
  text-shadow: 0 1px 3px rgba(0,0,0,.65);
}

.collar-one { top: 36%; left: 37%; }
.collar-two { top: 51%; left: 58%; }
.collar-three { top: 66%; right: 22%; }
.collar-one::after { content: "ZK-1"; }
.collar-two::after { content: "ZK-2"; }
.collar-three::after { content: "ZK-3"; }

.surface-map-note {
  position: absolute;
  z-index: 4;
  right: 12px;
  bottom: 12px;
  padding: 6px 8px;
  border-radius: 5px;
  background: rgba(13, 41, 55, 0.72);
  color: rgba(255,255,255,.84);
  font-size: 9px;
}

.surface-model-summary {
  padding: 24px 21px;
  border-left: 1px solid var(--line);
}

.surface-model-summary h3 {
  margin: 7px 0 0;
  font-size: 20px;
}

.surface-model-summary > p {
  margin: 12px 0 19px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.65;
}

.surface-model-summary > div {
  padding: 11px 0;
  border-top: 1px solid var(--line);
}

.surface-model-summary > div span,
.surface-model-summary > div strong {
  display: block;
}

.surface-model-summary > div span {
  color: var(--faint);
  font-size: 10px;
}

.surface-model-summary > div strong {
  margin-top: 5px;
  color: var(--ink-2);
  font-size: 12px;
}

.volume-model-body {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) 370px;
  min-height: 590px;
}

.three-d-volume-stage {
  --slice-offset: 80px;
  position: relative;
  min-width: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(71, 148, 169, 0.13), transparent 22rem),
    linear-gradient(145deg, #e9f1f2, #cad7d7);
  perspective: 1100px;
}

.volume-stack {
  position: absolute;
  top: 47%;
  left: 51%;
  width: min(560px, 72%);
  aspect-ratio: 1.55;
  transform: translate(-50%, -50%) rotateX(59deg) rotateZ(-36deg);
  transform-style: preserve-3d;
}

.volume-layer,
.active-slice-plane {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(65, 91, 92, 0.34);
  transform-style: preserve-3d;
}

.volume-layer {
  background:
    linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px),
    rgba(127, 157, 151, 0.22);
  background-size: 12.5% 16.666%;
  box-shadow: 0 0 26px rgba(28, 62, 66, 0.07);
}

.layer-surface { transform: translateZ(80px); background-color: rgba(144, 169, 133, 0.34); }
.layer-400 { transform: translateZ(40px); background-color: rgba(160, 166, 137, 0.2); }
.layer-800 { transform: translateZ(0); background-color: rgba(178, 150, 126, 0.2); }
.layer-1200 { transform: translateZ(-40px); background-color: rgba(144, 125, 118, 0.2); }
.layer-1600 { transform: translateZ(-80px); background-color: rgba(100, 100, 100, 0.2); }

.volume-layer i {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(225,127,75,.72), rgba(225,127,75,.08) 65%, transparent 72%);
}

.layer-400 i:first-child { top: 23%; left: 46%; width: 24%; height: 32%; }
.layer-800 i:first-child { top: 28%; left: 42%; width: 30%; height: 38%; }
.layer-800 i:nth-child(2) { right: 12%; bottom: 13%; width: 19%; height: 24%; background: radial-gradient(circle, rgba(49,141,182,.66), transparent 72%); }
.layer-1200 i:first-child { top: 32%; left: 45%; width: 25%; height: 31%; }
.layer-1200 i:nth-child(2) { bottom: 11%; left: 18%; width: 18%; height: 23%; background: radial-gradient(circle, rgba(49,141,182,.55), transparent 72%); }
.layer-1600 i:first-child { top: 40%; left: 48%; width: 18%; height: 23%; }

.volume-anomaly {
  position: absolute;
  z-index: 5;
  border-radius: 50%;
  pointer-events: none;
}

.anomaly-core {
  top: 29%;
  left: 44%;
  width: 26%;
  height: 34%;
  border: 3px solid rgba(239, 193, 84, 0.82);
  background: rgba(239, 193, 84, 0.13);
  box-shadow: 0 0 35px rgba(239, 193, 84, 0.24);
  transform: translateZ(8px);
}

.anomaly-flank {
  right: 12%;
  bottom: 15%;
  width: 19%;
  height: 24%;
  border: 2px solid rgba(43, 144, 182, 0.72);
  transform: translateZ(-22px);
}

.volume-drill {
  position: absolute;
  z-index: 7;
  width: 3px;
  height: 150px;
  border-radius: 999px;
  background: #243f4b;
  box-shadow: 0 0 0 1px rgba(255,255,255,.55);
  transform-origin: top;
  transform: rotateX(-64deg) translateZ(82px);
}

.drill-one { top: 24%; left: 38%; }
.drill-two { top: 36%; left: 58%; }
.drill-three { top: 26%; right: 21%; }

.active-slice-plane {
  z-index: 9;
  border: 3px solid #f4c955;
  background: rgba(244, 201, 85, 0.09);
  box-shadow: 0 0 18px rgba(244, 201, 85, 0.25);
  transform: translateZ(calc(80px - var(--slice-offset)));
  transition: transform 160ms ease;
}

.active-slice-plane span {
  position: absolute;
  top: 7px;
  left: 8px;
  padding: 4px 7px;
  border-radius: 5px;
  background: #f4c955;
  color: #594613;
  font-size: 9px;
  font-weight: 850;
}

.volume-axis {
  position: absolute;
  z-index: 10;
  top: 17%;
  left: 22px;
  bottom: 18%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 12px;
  border-left: 1px solid rgba(39, 79, 91, 0.45);
}

.volume-axis span {
  color: #456774;
  font-size: 9px;
}

.volume-orientation {
  position: absolute;
  z-index: 10;
  right: 20px;
  bottom: 20px;
  display: grid;
  grid-template-columns: auto 40px auto;
  align-items: center;
  gap: 6px;
  color: #355a68;
  font-size: 10px;
}

.volume-orientation i {
  height: 1px;
  background: #355a68;
}

.volume-help {
  position: absolute;
  z-index: 10;
  bottom: 18px;
  left: 22px;
  color: #597581;
  font-size: 10px;
}

.slice-inspector {
  padding: 22px;
  border-left: 1px solid var(--line);
  background: #fff;
}

.slice-title > span {
  color: var(--blue-2);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.14em;
}

.slice-title strong {
  display: block;
  margin-top: 8px;
  font-size: 18px;
}

.slice-title p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

.slice-preset-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-top: 15px;
}

.slice-preset-buttons button {
  min-height: 32px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafb;
  color: var(--muted);
  font-size: 10px;
}

.slice-preset-buttons button:hover,
.slice-preset-buttons button.active {
  border-color: #e4bd53;
  background: #fff5d9;
  color: #75591b;
}

.slice-depth-range {
  display: block;
  margin-top: 16px;
}

.slice-depth-range > span {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 10px;
}

.slice-depth-range b {
  color: var(--blue);
}

.slice-depth-range input {
  width: 100%;
  margin-top: 9px;
  accent-color: var(--blue);
}

.slice-canvas-wrap {
  position: relative;
  margin-top: 15px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #dbe3e0;
}

#inversionSliceCanvas {
  width: 100%;
  height: auto;
}

.slice-canvas-wrap > span {
  position: absolute;
  right: 7px;
  bottom: 6px;
  padding: 4px 5px;
  border-radius: 4px;
  background: rgba(15,40,53,.65);
  color: rgba(255,255,255,.78);
  font-size: 7px;
}

.slice-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 13px;
}

.slice-legend span {
  color: var(--muted);
  font-size: 9px;
}

.slice-legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-radius: 2px;
}

.vertical-section-panel {
  margin-top: 0;
}

@media (max-width: 1280px) {
  .volume-model-body {
    grid-template-columns: 1fr;
  }

  .three-d-volume-stage {
    min-height: 570px;
  }

  .slice-inspector {
    display: grid;
    grid-template-columns: 0.8fr 1.1fr;
    gap: 18px 25px;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .slice-preset-buttons,
  .slice-depth-range {
    grid-column: 1;
  }

  .slice-canvas-wrap {
    grid-column: 2;
    grid-row: 1 / 4;
    margin-top: 0;
  }

  .slice-legend {
    grid-column: 2;
  }
}

@media (max-width: 900px) {
  .surface-model-body {
    grid-template-columns: 1fr;
  }

  .surface-map-stage {
    min-height: 390px;
  }

  .surface-model-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .surface-model-summary > .micro-label,
  .surface-model-summary > h3,
  .surface-model-summary > p {
    grid-column: 1 / -1;
  }

  .surface-model-summary > div {
    border-top: 0;
  }
}

@media (max-width: 640px) {
  .home-v2 .overview-intro h2 {
    font-size: 36px;
  }

  .surface-model-panel .panel-toolbar,
  .volume-model-panel .panel-toolbar,
  .vertical-section-panel .panel-toolbar {
    align-items: flex-start;
    flex-direction: column;
    padding: 13px;
  }

  .surface-model-summary {
    grid-template-columns: 1fr;
  }

  .surface-map-stage {
    min-height: 320px;
  }

  .three-d-volume-stage {
    min-height: 470px;
  }

  .volume-stack {
    width: 74%;
  }

  .volume-axis {
    left: 9px;
  }

  .volume-help {
    right: 12px;
    left: 12px;
    text-align: center;
  }

  .slice-inspector {
    display: block;
    padding: 18px;
  }

  .slice-preset-buttons,
  .slice-depth-range,
  .slice-canvas-wrap,
  .slice-legend {
    margin-top: 15px;
  }

  .slice-preset-buttons {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* One-case evidence journey and project workflow */

.case-evidence-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.case-evidence-tags span {
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
}

.project-flow-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 58px;
}

.project-flow-cards article {
  position: relative;
  display: flex;
  min-height: 310px;
  padding: 28px 25px 24px;
  border: 1px solid var(--line);
  border-top: 3px solid #93b8c9;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  flex-direction: column;
}

.project-flow-cards article:nth-child(2) {
  border-top-color: #5fa9c5;
}

.project-flow-cards article:nth-child(3) {
  border-top-color: var(--blue);
}

.project-flow-cards article:nth-child(4) {
  border-top-color: var(--jade);
}

.project-flow-cards article:not(:last-child)::after {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: -23px;
  display: grid;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #f5f9fb;
  color: var(--blue-2);
  content: "→";
  font-size: 14px;
  place-items: center;
  transform: translateY(-50%);
}

.project-flow-cards b {
  color: var(--blue-2);
  font-size: 11px;
  letter-spacing: 0.12em;
}

.project-flow-cards strong {
  display: block;
  margin-top: 22px;
  color: var(--ink);
  font-size: 23px;
}

.project-flow-cards p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}

.project-flow-cards article > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 21px;
}

.project-flow-cards article > div span {
  padding: 6px 8px;
  border-radius: 5px;
  background: #eef4f7;
  color: var(--ink-2);
  font-size: 11px;
}

.project-flow-cards small {
  display: block;
  margin-top: auto;
  padding-top: 20px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 760;
}

.project-space-panel {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.48fr);
  gap: clamp(36px, 5vw, 78px);
  margin-top: 72px;
  padding: clamp(34px, 5vw, 68px);
  border-radius: 20px;
  background: #102f43;
  color: #fff;
}

.project-space-intro .eyebrow {
  color: #69d3df;
}

.project-space-intro h3 {
  margin: 0;
  font-size: clamp(29px, 3vw, 44px);
  font-weight: 630;
  letter-spacing: -0.035em;
  line-height: 1.18;
}

.project-space-intro > p:last-child {
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
  line-height: 1.8;
}

.project-space-rows article {
  display: grid;
  grid-template-columns: 100px minmax(180px, 0.75fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 21px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.project-space-rows article:first-child {
  border-top: 0;
  padding-top: 0;
}

.project-space-rows span {
  color: #69d3df;
  font-size: 11px;
  font-weight: 820;
  letter-spacing: 0.08em;
}

.project-space-rows strong {
  font-size: 15px;
  line-height: 1.55;
}

.project-space-rows p {
  margin: 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 13px;
  line-height: 1.7;
}

.home-project-flow .service-boundary {
  margin-top: 24px;
}

.home-project-flow .service-cta {
  align-items: center;
}

.home-project-flow .service-cta > div:first-child {
  max-width: 830px;
}

.home-project-flow .service-cta h3 {
  font-size: clamp(35px, 4vw, 54px);
}

.home-project-flow .service-cta h3 + p {
  margin: 17px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
}

.case-evidence-section .evidence-flow {
  gap: 12px;
}

.case-evidence-section .evidence-flow button {
  min-height: 154px;
  padding: 20px;
}

.case-evidence-section .evidence-flow i {
  letter-spacing: 0.08em;
}

.case-evidence-section .evidence-flow strong {
  font-size: 15px;
}

.case-evidence-section .evidence-flow p {
  font-size: 12px;
  line-height: 1.65;
}

.case-evidence-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(390px, 0.95fr);
  min-height: 565px;
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
}

.case-evidence-visual {
  position: relative;
  min-height: 565px;
  margin: 0;
  overflow: hidden;
  background: #e6eef2;
}

.case-evidence-visual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-evidence-visual::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 56%, rgba(7, 35, 52, 0.72));
  content: "";
  pointer-events: none;
}

.case-evidence-visual figcaption {
  position: absolute;
  z-index: 2;
  right: 22px;
  bottom: 22px;
  left: 22px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  color: #fff;
}

.case-evidence-visual figcaption span,
.case-evidence-visual figcaption strong,
.case-evidence-visual figcaption small {
  display: block;
}

.case-evidence-visual figcaption span {
  color: #79dce5;
  font-size: 10px;
  font-weight: 820;
  letter-spacing: 0.11em;
}

.case-evidence-visual figcaption strong {
  margin-top: 6px;
  font-size: 18px;
}

.case-evidence-visual figcaption small {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
}

.case-evidence-visual figcaption button {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  background: rgba(10, 39, 56, 0.46);
  color: #fff;
  font-size: 12px;
  backdrop-filter: blur(8px);
}

.case-evidence-analysis {
  padding: clamp(30px, 4vw, 56px);
}

.case-evidence-analysis h3 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(27px, 2.6vw, 39px);
  font-weight: 640;
  letter-spacing: -0.035em;
  line-height: 1.23;
}

.case-analysis-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 25px;
  margin-top: 30px;
}

.case-analysis-grid article {
  padding: 20px 0;
  border-top: 1px solid var(--line);
}

.case-analysis-grid span {
  color: var(--blue-2);
  font-size: 11px;
  font-weight: 820;
  letter-spacing: 0.08em;
}

.case-analysis-grid p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
}

.case-analysis-grid .ai-analysis-role {
  padding-inline: 15px;
  border-top-color: #97c9bd;
  background: #f0f7f4;
}

.case-analysis-grid .ai-analysis-role span {
  color: var(--jade);
}

.evidence-record-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 20px;
}

.evidence-record-tags span {
  padding: 7px 10px;
  border: 1px solid #d5e2e8;
  border-radius: 999px;
  background: #f7fafb;
  color: var(--ink-2);
  font-size: 11px;
}

@media (max-width: 1120px) {
  .project-flow-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-flow-cards article:not(:last-child)::after {
    display: none;
  }

  .case-evidence-detail {
    grid-template-columns: 1fr;
  }

  .case-evidence-visual {
    min-height: 500px;
  }
}

@media (max-width: 900px) {
  .project-space-panel {
    grid-template-columns: 1fr;
  }

  .project-space-rows article {
    grid-template-columns: 95px minmax(160px, 0.75fr) minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .project-flow-cards {
    grid-template-columns: 1fr;
  }

  .project-flow-cards article {
    min-height: 0;
  }

  .project-space-panel {
    padding: 30px 22px;
  }

  .project-space-rows article {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .case-evidence-detail,
  .case-evidence-visual {
    min-height: 0;
  }

  .case-evidence-visual {
    height: 390px;
  }

  .case-evidence-visual figcaption {
    right: 15px;
    bottom: 15px;
    left: 15px;
  }

  .case-analysis-grid {
    grid-template-columns: 1fr;
  }

  .case-analysis-grid .ai-analysis-role {
    padding-inline: 12px;
  }
}

/* Multimodal geology assistant */

.assistant-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(900px, 100%);
  margin: 0 0 24px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #edf3f6;
}

.assistant-mode-switch button {
  display: flex;
  gap: 15px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  transition: 160ms ease;
}

.assistant-mode-switch button:hover,
.assistant-mode-switch button.active {
  border-color: #c6dae4;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(24, 66, 87, 0.07);
}

.assistant-mode-switch button > b {
  display: grid;
  width: 37px;
  height: 37px;
  border-radius: 9px;
  background: #dcebf1;
  color: var(--blue);
  font-size: 12px;
  place-items: center;
}

.assistant-mode-switch button.active > b {
  background: var(--blue);
  color: #fff;
}

.assistant-mode-switch button > span,
.assistant-mode-switch strong,
.assistant-mode-switch small {
  display: block;
}

.assistant-mode-switch strong {
  font-size: 15px;
}

.assistant-mode-switch small {
  margin-top: 4px;
  color: var(--faint);
  font-size: 12px;
}

.rock-image-workspace {
  display: grid;
  grid-template-columns: minmax(420px, 0.88fr) minmax(0, 1.12fr);
  gap: 18px;
  align-items: start;
}

.rock-image-input-panel,
.rock-analysis-panel {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--shadow-soft);
}

.rock-image-input-panel {
  padding: 25px;
}

.rock-panel-heading {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  align-items: end;
  margin-bottom: 20px;
}

.rock-panel-heading span {
  color: var(--blue-2);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.rock-panel-heading h2 {
  margin: 6px 0 0;
  font-size: 25px;
}

.rock-panel-heading > p {
  max-width: 270px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.rock-image-dropzone {
  position: relative;
  display: block;
  height: 405px;
  overflow: hidden;
  border: 1px solid #c8dbe4;
  border-radius: 14px;
  background: #dce7eb;
  cursor: pointer;
  transition: 160ms ease;
}

.rock-image-dropzone:hover,
.rock-image-dropzone.dragover {
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px rgba(20, 167, 191, 0.12);
}

.rock-image-dropzone.has-error {
  border-color: #c96a67;
}

.rock-image-dropzone input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.rock-image-dropzone > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 220ms ease;
}

.rock-image-dropzone:hover > img,
.rock-image-dropzone.dragover > img {
  filter: brightness(0.8);
  transform: scale(1.01);
}

.rock-image-name {
  position: absolute;
  top: 15px;
  left: 15px;
  max-width: calc(100% - 30px);
  padding: 7px 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 7px;
  background: rgba(9, 37, 52, 0.66);
  color: #fff;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}

.dropzone-action {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  background: rgba(8, 39, 55, 0.72);
  color: #fff;
  backdrop-filter: blur(10px);
}

.dropzone-action b,
.dropzone-action small {
  display: block;
}

.dropzone-action b {
  font-size: 13px;
}

.dropzone-action small {
  color: rgba(255, 255, 255, 0.65);
  font-size: 10px;
  text-align: right;
}

.demo-sample-picker {
  margin-top: 22px;
}

.demo-sample-picker > span,
.rock-image-controls label > span,
.rock-image-context > span {
  display: block;
  color: var(--faint);
  font-size: 11px;
  font-weight: 780;
  letter-spacing: 0.06em;
}

.demo-sample-picker > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.demo-sample-picker button {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 58px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink-2);
  text-align: left;
}

.demo-sample-picker button:hover,
.demo-sample-picker button.active {
  border-color: #8ebccd;
  background: #eef7fa;
  color: var(--blue);
}

.demo-sample-picker img {
  width: 46px;
  height: 46px;
  border-radius: 7px;
  object-fit: cover;
}

.demo-sample-picker button span {
  overflow: hidden;
  font-size: 11px;
  line-height: 1.35;
}

.rock-image-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.rock-image-controls select {
  width: 100%;
  margin-top: 8px;
  padding: 11px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
}

.rock-image-context {
  margin-top: 16px;
  padding: 14px 16px;
  border-left: 3px solid #82b6c8;
  background: #f1f6f8;
}

.rock-image-context p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.rock-analyze-button {
  width: 100%;
  margin-top: 18px;
}

.rock-analyze-button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.local-image-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 13px 0 0;
  color: var(--faint);
  font-size: 11px;
  line-height: 1.55;
}

.local-image-note i {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--jade);
  box-shadow: 0 0 0 4px rgba(45, 139, 113, 0.1);
}

.rock-analysis-panel {
  overflow: hidden;
}

.analysis-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  background: #f4f8fa;
}

.analysis-status > span {
  color: var(--blue-2);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.analysis-status > strong {
  color: var(--jade);
  font-size: 12px;
}

.analysis-status > strong.analyzing {
  color: var(--cyan);
}

.analysis-primary {
  padding: 32px 30px 28px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, #eef6f8, #f7fbfc 70%);
}

.analysis-primary > span {
  color: var(--blue-2);
  font-size: 11px;
  font-weight: 820;
  letter-spacing: 0.08em;
}

.analysis-primary h2 {
  max-width: 720px;
  margin: 10px 0 0;
  font-size: clamp(25px, 2.5vw, 37px);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1.25;
}

.mineral-candidates {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.mineral-candidates span {
  padding: 7px 10px;
  border: 1px solid #bad2dc;
  border-radius: 999px;
  background: #fff;
  color: var(--blue);
  font-size: 12px;
}

.structured-image-result {
  padding: 6px 30px 10px;
}

.structured-image-result article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}

.structured-image-result article:first-child {
  border-top: 0;
}

.structured-image-result article > b {
  display: grid;
  width: 31px;
  height: 31px;
  border-radius: 8px;
  background: #e4eff3;
  color: var(--blue);
  font-size: 10px;
  place-items: center;
}

.structured-image-result span {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 800;
}

.structured-image-result p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.72;
}

.image-followup {
  margin: 0 30px 24px;
  padding: 18px;
  border-radius: 12px;
  background: #102f43;
  color: #fff;
}

.image-followup > span {
  display: block;
  margin-bottom: 10px;
  color: #6ed7e3;
  font-size: 10px;
  font-weight: 820;
  letter-spacing: 0.1em;
}

.image-followup button {
  margin: 0 6px 7px 0;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.82);
  font-size: 11px;
}

.image-followup button:hover {
  border-color: #6ed7e3;
  color: #fff;
}

.image-followup p {
  margin: 8px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  line-height: 1.7;
}

.image-result-boundary {
  margin: 0;
  padding: 18px 30px;
  border-top: 1px solid #c9ded7;
  background: #edf5f2;
  color: #4e7064;
  font-size: 12px;
  line-height: 1.7;
}

.image-result-boundary strong {
  margin-right: 8px;
  color: var(--jade);
}

@media (max-width: 1080px) {
  .rock-image-workspace {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .assistant-mode-switch {
    grid-template-columns: 1fr;
  }

  .rock-panel-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .rock-panel-heading > p {
    max-width: none;
  }

  .rock-image-dropzone {
    height: 340px;
  }

  .dropzone-action {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .dropzone-action small {
    text-align: left;
  }

  .demo-sample-picker > div,
  .rock-image-controls {
    grid-template-columns: 1fr;
  }

  .demo-sample-picker button {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .demo-sample-picker img {
    width: 54px;
    height: 54px;
  }

  .analysis-status {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .analysis-primary,
  .structured-image-result {
    padding-right: 20px;
    padding-left: 20px;
  }

  .image-followup {
    margin-right: 20px;
    margin-left: 20px;
  }

  .image-result-boundary {
    padding-right: 20px;
    padding-left: 20px;
  }
}

/* Homepage overview carousel */

.home-hero-carousel {
  min-height: 750px;
  outline: none;
  touch-action: pan-y;
}

.home-hero-carousel::after {
  display: none;
}

.hero-slide-stack,
.hero-slide {
  position: absolute;
  inset: 0;
}

.hero-slide {
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(2.5%);
  transition: opacity 520ms ease, transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-slide.active {
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.hero-slide::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(7, 28, 45, 0.92) 0%, rgba(8, 36, 55, 0.74) 47%, rgba(8, 36, 55, 0.18) 84%),
    linear-gradient(0deg, rgba(7, 27, 42, 0.78) 0%, transparent 48%);
  content: "";
  pointer-events: none;
}

.hero-slide > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.72) contrast(1.02);
  transform: scale(1.025);
  transition: transform 7s ease;
}

.hero-slide.active > img {
  transform: scale(1);
}

.home-hero-carousel .landing-copy {
  z-index: 3;
  padding-top: 118px;
}

.home-hero-carousel .landing-copy h1 {
  max-width: 1120px;
  font-size: clamp(54px, 6.35vw, 96px);
}

.home-hero-carousel .landing-copy > p:not(.eyebrow) {
  max-width: 800px;
}

.home-hero-carousel .hero-note,
.home-hero-carousel .hero-capability-line {
  z-index: 4;
}

.home-hero-carousel .hero-note {
  right: 4vw;
  bottom: 102px;
  text-align: right;
}

.home-hero-carousel .hero-capability-line {
  min-height: 72px;
}

.hero-carousel-controls {
  position: absolute;
  z-index: 8;
  bottom: 92px;
  left: 4vw;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(720px, 63vw);
}

.hero-arrow {
  display: grid;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  background: rgba(10, 41, 59, 0.4);
  color: #fff;
  font-size: 14px;
  place-items: center;
  backdrop-filter: blur(8px);
}

.hero-arrow:hover {
  border-color: #78dbe4;
  background: rgba(28, 95, 119, 0.58);
}

.hero-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  flex: 1 1 auto;
  gap: 9px;
}

.hero-progress button {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.58);
  text-align: left;
}

.hero-progress button i {
  position: relative;
  display: block;
  width: 100%;
  height: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.28);
}

.hero-progress button i::after {
  position: absolute;
  inset: 0;
  background: #6ed7e3;
  content: "";
  transform: translateX(-102%);
  transition: transform 420ms ease;
}

.hero-progress button.active i::after {
  transform: translateX(0);
}

.hero-progress button span {
  overflow: hidden;
  font-size: 11px;
  font-weight: 720;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-progress button.active {
  color: #fff;
}

.hero-count {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

@media (max-width: 1050px) {
  .hero-carousel-controls {
    width: min(660px, 73vw);
  }

  .home-hero-carousel .hero-note {
    display: none;
  }
}

@media (max-width: 720px) {
  .home-hero-carousel {
    min-height: 680px;
  }

  .home-hero-carousel .landing-copy {
    padding-top: 76px;
  }

  .home-hero-carousel .landing-copy h1 {
    font-size: clamp(43px, 12.5vw, 64px);
  }

  .home-hero-carousel .landing-copy > p:not(.eyebrow) {
    font-size: 15px;
    line-height: 1.68;
  }

  .hero-carousel-controls {
    right: 18px;
    bottom: 84px;
    left: 18px;
    width: auto;
  }

  .hero-progress button span {
    display: none;
  }

  .home-hero-carousel .hero-capability-line {
    right: 18px;
    left: 18px;
    gap: 9px;
    min-height: 65px;
    font-size: 11px;
  }

  .home-hero-carousel .hero-capability-line i {
    width: 3px;
    height: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide,
  .hero-slide > img,
  .hero-progress button i::after {
    transition: none;
  }
}

/* Official site shell: public homepage with external product destinations. */
.site-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 8px;
}

.site-actions a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid #c9d8e2;
  border-radius: 999px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.site-actions a:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.site-actions a.primary {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.site-actions a.primary:hover {
  border-color: #084d88;
  background: #084d88;
  color: #fff;
}

.site-actions a.unavailable {
  cursor: not-allowed;
  opacity: 0.55;
}

.product-entries button.unavailable {
  cursor: not-allowed;
  opacity: 0.55;
}

.global-footer {
  grid-template-columns: minmax(220px, 0.9fr) minmax(280px, 1.6fr) auto;
  align-items: start;
}

.footer-boundary {
  line-height: 1.65;
}

.footer-meta {
  display: grid !important;
  gap: 4px;
  justify-items: end;
}

.footer-meta a {
  color: var(--blue);
}

@media (max-width: 900px) {
  .global-header {
    grid-template-columns: 1fr auto;
    row-gap: 4px;
  }

  .home-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
  }

  .site-actions {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: stretch;
    padding-bottom: 8px;
  }

  .site-actions a {
    flex: 1;
    text-align: center;
  }

  .global-footer {
    grid-template-columns: 1fr;
  }

  .footer-meta {
    justify-items: start;
  }
}

@media (max-width: 640px) {
  .global-header {
    min-height: 132px;
  }

  .brand {
    width: 176px;
  }

  .home-nav {
    gap: 18px;
  }

  .home-nav button,
  .site-actions a {
    font-size: 12px;
  }
}