@font-face {
  font-family: "Mona Sans";
  src:
    url("https://cdn.jsdelivr.net/gh/github/mona-sans@main/fonts/variable/MonaSansVF%5Bwdth,wght,opsz,ital%5D.woff2") format("woff2 supports variations"),
    url("https://cdn.jsdelivr.net/gh/github/mona-sans@main/fonts/variable/MonaSansVF%5Bwdth,wght,opsz,ital%5D.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
  font-optical-sizing: auto;
}

:root {
  --onyx: #141414;
  --royal-azure: #2055dc;
  --chartreuse: #c8ef3c;
  --platinum: #ebebeb;
  --tangerine: #f5915b;
  --bg: #ffffff;
  --bg-elevated: #ffffff;
  --bg-atmosphere:
    radial-gradient(circle at top left, rgba(214, 226, 247, 0.22), transparent 34%),
    radial-gradient(circle at top right, rgba(236, 240, 248, 0.42), transparent 30%);
  --text: #111111;
  --muted: rgba(17, 17, 17, 0.56);
  --line: rgba(17, 17, 17, 0.9);
  --soft-line: rgba(17, 17, 17, 0.16);
  --accent: var(--chartreuse);
  --accent-secondary: var(--royal-azure);
  --accent-warm: var(--tangerine);
  --accent-text: var(--onyx);
  --highlight: var(--chartreuse);
  --hero-node-rgb: 32, 85, 220;
  --hero-edge-rgb: 20, 20, 20;
  --shadow-soft: 0 14px 36px rgba(17, 17, 17, 0.05);
  --shadow-medium: 0 20px 54px rgba(17, 17, 17, 0.08);
  --container: min(1120px, calc(100% - 64px));
  --radius: 8px;
}

html[data-theme="dark"] {
  --bg: #0b0b0b;
  --bg-elevated: #111111;
  --bg-atmosphere:
    radial-gradient(circle at top left, rgba(92, 109, 143, 0.14), transparent 34%),
    radial-gradient(circle at top right, rgba(44, 57, 82, 0.22), transparent 30%);
  --text: #f4f2ee;
  --muted: rgba(244, 242, 238, 0.58);
  --line: rgba(244, 242, 238, 0.46);
  --soft-line: rgba(244, 242, 238, 0.12);
  --accent: var(--chartreuse);
  --accent-secondary: var(--royal-azure);
  --accent-warm: var(--tangerine);
  --accent-text: var(--onyx);
  --highlight: var(--chartreuse);
  --hero-node-rgb: 200, 239, 60;
  --hero-edge-rgb: 32, 85, 220;
  --shadow-soft: 0 16px 42px rgba(0, 0, 0, 0.22);
  --shadow-medium: 0 24px 68px rgba(0, 0, 0, 0.32);
}

* {
  box-sizing: border-box;
}

html {
  scroll-padding-top: 72px;
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  overflow-anchor: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  overflow-anchor: none;
  background: var(--bg);
  background-image: var(--bg-atmosphere);
  background-attachment: fixed;
  color: var(--text);
  font-family: "Mona Sans", sans-serif;
  font-variation-settings: "wght" 430, "wdth" 100, "opsz" 14;
  transition: background-color 220ms ease, color 220ms ease;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
}

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

p {
  margin: 0;
}

p + p {
  margin-top: 1.15rem;
}

.site-shell {
  width: 100%;
  padding-top: var(--topbar-offset, 78px);
  padding-bottom: 4.5rem;
  position: relative;
  overflow: visible;
}

body.page-locked {
  overflow: hidden;
}

body.page-locked .site-shell {
  visibility: hidden;
}

.page-lock {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 2rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 94%, transparent), color-mix(in srgb, var(--bg) 98%, transparent)),
    var(--bg-atmosphere);
  backdrop-filter: blur(14px);
}

.page-lock-card {
  width: min(460px, 100%);
  display: grid;
  gap: 0.95rem;
  padding: 2rem;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  box-shadow: var(--shadow-soft);
}

.page-lock-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-lock-title {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.page-lock-copy {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted);
}

.page-lock-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.page-lock-input,
.page-lock-button {
  appearance: none;
  border-radius: 0;
  font: inherit;
}

.page-lock-input {
  min-width: 0;
  padding: 0.95rem 1rem;
  border: 1px solid var(--soft-line);
  background: transparent;
  color: var(--text);
}

.page-lock-input:focus-visible,
.page-lock-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.page-lock-button {
  padding: 0.95rem 1.15rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.page-lock-button:hover {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}

.page-lock-error {
  min-height: 1.2rem;
  font-size: 0.88rem;
  color: #b33939;
}

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  width: 100%;
  margin: 0;
  padding:
    18px
    max(18px, calc((100vw - var(--container)) / 2 + 18px))
    16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 26px rgba(17, 17, 17, 0.04);
  transform: translateZ(0);
  isolation: isolate;
}

.brand {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.045em;
  text-transform: none;
  line-height: 1;
}

.brand-text {
  white-space: nowrap;
  display: inline-block;
  transform: scaleY(1.08);
}

.site-nav {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 1.8rem;
}

.site-nav a,
.theme-toggle,
.menu-toggle {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-nav a {
  color: var(--muted);
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--accent-text);
  background: var(--accent);
  padding: 0.15em 0.35em;
  margin: -0.15em -0.35em;
  border-radius: 0;
}

.theme-toggle:hover,
.theme-toggle:focus-visible,
.menu-toggle:hover,
.menu-toggle:focus-visible {
  color: var(--text);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.archive-nav-toggle {
  border: 0;
  background: transparent;
  padding: 0.2rem 0;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.archive-nav-track {
  position: relative;
  width: 2.2rem;
  height: 1.3rem;
  border: 1px solid var(--soft-line);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  padding: 0.1rem;
  transition: border-color 180ms ease, background-color 180ms ease;
}

.archive-nav-thumb {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: color-mix(in srgb, #2055dc 84%, var(--text));
  transform: translateX(0);
  transition: transform 180ms ease, background-color 180ms ease;
}

.archive-nav-toggle:hover .archive-nav-track,
.archive-nav-toggle:focus-visible .archive-nav-track {
  border-color: color-mix(in srgb, #2055dc 52%, var(--soft-line));
  background: color-mix(in srgb, #2055dc 8%, transparent);
}

.archive-nav-toggle.is-active .archive-nav-thumb {
  transform: translateX(0.85rem);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lang-select-label {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.lang-select {
  border: 1px solid var(--soft-line);
  background: transparent;
  color: var(--muted);
  padding: 0.35rem 1.8rem 0.35rem 0.55rem;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.lang-select-label::after {
  content: "▾";
  position: absolute;
  right: 0.65rem;
  font-size: 0.65rem;
  color: var(--muted);
  pointer-events: none;
}

.theme-toggle,
.menu-toggle {
  border: 0;
  background: transparent;
  padding: 0.2rem 0;
  border-radius: 0;
}

.theme-toggle {
  display: none !important;
}

.menu-toggle {
  display: none;
}

.theme-toggle:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.theme-toggle-track {
  position: relative;
  width: 2.2rem;
  height: 1.3rem;
  border: 1px solid var(--soft-line);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  padding: 0.1rem;
}

.theme-toggle-thumb {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: var(--text);
  transform: translateX(0);
  transition: transform 180ms ease, background 180ms ease;
}

html[data-theme="dark"] .theme-toggle-thumb {
  transform: translateX(0.85rem);
}

.section {
  width: var(--container);
  margin: 0 auto;
}

.hero {
  padding: 10vh 0 2.8rem;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.hero-label,
.eyebrow,
.work-col-label,
.work-type,
.case-meta span,
.fact-card span,
.detail-label,
.footer-note {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero-frame {
  position: relative;
  padding-top: 0;
  min-height: 0;
}

.hero-kicker {
  margin: 0 0 0.8rem;
  font-family: "Mona Sans", sans-serif;
  font-size: 0.95rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--muted);
  position: relative;
  z-index: 1;
}

.hero-title,
.case-title {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.88;
}

.hero-title {
  font-size: clamp(3.6rem, 8vw, 5.8rem);
  text-align: center;
  text-transform: none;
  position: relative;
  z-index: 1;
}

.hero-media {
  --pointer-x: 0px;
  --pointer-y: 0px;
  --pointer-tilt-x: 0deg;
  --pointer-tilt-y: 0deg;
  --squash-x: 1;
  --squash-y: 1;
  --poke-cx: 50%;
  --poke-cy: 50%;
  --poke-depth: 0;
  position: relative;
  width: min(760px, 86vw);
  height: min(46vh, 470px);
  margin: 2.5rem auto 0;
  overflow: hidden;
  background: transparent;
  isolation: isolate;
  transform-origin: 44% 50%;
  animation: heroFormFloat 10.5s ease-in-out infinite,
    heroLiquidShape 16s ease-in-out infinite;
  border-radius: 58% 42% 55% 45% / 42% 56% 44% 58%;
}

.hero-media::before,
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}

.hero-media::before {
  background: none;
  opacity: 0;
  filter: none;
  animation: none;
}

.hero-media::after {
  inset: 2px;
  background:
    radial-gradient(
      circle at var(--poke-cx) var(--poke-cy),
      rgba(18, 76, 173, calc(var(--poke-depth) * 0.34)) 0%,
      rgba(18, 76, 173, calc(var(--poke-depth) * 0.18)) 8%,
      rgba(255, 255, 255, calc(var(--poke-depth) * 0.18)) 14%,
      rgba(255, 255, 255, calc(var(--poke-depth) * 0.08)) 18%,
      rgba(255, 255, 255, 0) 28%
    ),
    radial-gradient(
      ellipse at calc(30% + var(--pointer-x) * 0.1) calc(24% + var(--pointer-y) * 0.08),
      rgba(241, 250, 255, 0.42) 0%,
      rgba(241, 250, 255, 0.16) 24%,
      rgba(241, 250, 255, 0) 44%
    ),
    radial-gradient(
      ellipse at calc(64% - var(--pointer-x) * 0.08) calc(68% - var(--pointer-y) * 0.08),
      rgba(44, 147, 255, 0.3) 0%,
      rgba(44, 147, 255, 0.14) 28%,
      rgba(44, 147, 255, 0) 56%
    );
  border: none;
  box-shadow: none;
  opacity: 1;
  filter: none;
}

.hero-media-halo {
  position: absolute;
  inset: 8% 6%;
  background:
    radial-gradient(circle at 50% 45%, rgba(133, 206, 255, 0.2), transparent 56%),
    radial-gradient(circle at 34% 34%, rgba(214, 249, 255, 0.12), transparent 42%),
    radial-gradient(circle at 68% 70%, rgba(92, 179, 255, 0.16), transparent 48%);
  filter: blur(38px);
  opacity: 0.78;
  transform: translateX(-2.5%) scale(1.08) rotate(-3deg);
  pointer-events: none;
  animation: heroHaloDrift 11s ease-in-out infinite alternate;
  border-radius: 60% 40% 54% 46% / 44% 58% 42% 56%;
}

.hero-gradient {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: inherit;
}

.hero-gradient-ambient,
.hero-gradient-main {
  -webkit-mask-image: radial-gradient(
    ellipse 48% 38% at 49% 51%,
    rgba(0, 0, 0, 0.96) 0%,
    rgba(0, 0, 0, 0.94) 44%,
    rgba(0, 0, 0, 0.82) 62%,
    rgba(0, 0, 0, 0.28) 82%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: radial-gradient(
    ellipse 48% 38% at 49% 51%,
    rgba(0, 0, 0, 0.96) 0%,
    rgba(0, 0, 0, 0.94) 44%,
    rgba(0, 0, 0, 0.82) 62%,
    rgba(0, 0, 0, 0.28) 82%,
    rgba(0, 0, 0, 0) 100%
  );
}

.hero-gradient-ambient {
  transform: translateX(calc(-2% + var(--pointer-x) * 0.04))
    translateY(calc(var(--pointer-y) * 0.03))
    scale(calc(1.08 * var(--squash-x)), calc(0.98 * var(--squash-y)))
    rotate(calc(-2.5deg + var(--pointer-tilt-y) * 0.16));
  background:
    radial-gradient(ellipse at calc(34% + var(--pointer-x) * 0.12) calc(30% + var(--pointer-y) * 0.1), rgba(242, 251, 255, 1) 0%, rgba(242, 251, 255, 0.28) 30%, rgba(242, 251, 255, 0) 48%),
    radial-gradient(ellipse at calc(58% + var(--pointer-x) * 0.08) calc(52% + var(--pointer-y) * 0.08), rgba(114, 198, 255, 0.62) 0%, rgba(114, 198, 255, 0.18) 42%, rgba(114, 198, 255, 0) 60%),
    radial-gradient(ellipse at calc(72% - var(--pointer-x) * 0.06) calc(38% - var(--pointer-y) * 0.08), rgba(202, 245, 255, 0.44) 0%, rgba(202, 245, 255, 0.12) 30%, rgba(202, 245, 255, 0) 46%),
    radial-gradient(ellipse at calc(50% - var(--pointer-x) * 0.07) calc(72% - var(--pointer-y) * 0.08), rgba(74, 157, 255, 0.46) 0%, rgba(74, 157, 255, 0.12) 34%, rgba(74, 157, 255, 0) 52%);
  filter: blur(34px) saturate(1.05) brightness(1.04);
  opacity: 0.9;
  animation: heroTextureDrift 12s ease-in-out infinite alternate;
}

.hero-gradient-main {
  transform: scale(var(--squash-x), var(--squash-y));
  background:
    radial-gradient(ellipse at calc(32% + var(--pointer-x) * 0.14) calc(28% + var(--pointer-y) * 0.12), rgba(250, 253, 255, 1) 0%, rgba(250, 253, 255, 0.42) 16%, rgba(250, 253, 255, 0) 38%),
    radial-gradient(ellipse at calc(56% + var(--pointer-x) * 0.1) calc(48% + var(--pointer-y) * 0.08), rgba(145, 210, 255, 0.9) 0%, rgba(145, 210, 255, 0.48) 22%, rgba(145, 210, 255, 0) 52%),
    radial-gradient(ellipse at calc(68% - var(--pointer-x) * 0.08) calc(36% - var(--pointer-y) * 0.08), rgba(188, 241, 255, 0.48) 0%, rgba(188, 241, 255, 0.16) 32%, rgba(188, 241, 255, 0) 48%),
    radial-gradient(ellipse at calc(48% - var(--pointer-x) * 0.08) calc(78% - var(--pointer-y) * 0.1), rgba(73, 157, 255, 0.34) 0%, rgba(73, 157, 255, 0.14) 36%, rgba(73, 157, 255, 0) 50%);
  filter: saturate(1.02) contrast(1.02) brightness(1.02);
  opacity: 1;
  animation: heroTextureDrift 10s ease-in-out infinite alternate-reverse;
}

html[data-theme="dark"] .hero-media-halo {
  background:
    radial-gradient(circle at 48% 44%, rgba(132, 202, 255, 0.18), transparent 54%),
    radial-gradient(circle at 32% 30%, rgba(225, 248, 255, 0.08), transparent 34%),
    radial-gradient(circle at 66% 70%, rgba(92, 175, 255, 0.1), transparent 44%);
  opacity: 0.42;
}

html[data-theme="dark"] .hero-media::before {
  background: none;
  opacity: 0;
}

html[data-theme="dark"] .hero-media::after {
  background:
    radial-gradient(
      circle at var(--poke-cx) var(--poke-cy),
      rgba(12, 54, 129, calc(var(--poke-depth) * 0.42)) 0%,
      rgba(12, 54, 129, calc(var(--poke-depth) * 0.22)) 8%,
      rgba(238, 249, 255, calc(var(--poke-depth) * 0.14)) 14%,
      rgba(238, 249, 255, calc(var(--poke-depth) * 0.06)) 18%,
      rgba(238, 249, 255, 0) 28%
    ),
    radial-gradient(
      ellipse at calc(30% + var(--pointer-x) * 0.1) calc(24% + var(--pointer-y) * 0.08),
      rgba(238, 249, 255, 0.26) 0%,
      rgba(255, 255, 255, 0.06) 24%,
      rgba(255, 255, 255, 0) 40%
    ),
    radial-gradient(
      ellipse at calc(64% - var(--pointer-x) * 0.08) calc(68% - var(--pointer-y) * 0.08),
      rgba(72, 170, 255, 0.16) 0%,
      rgba(72, 170, 255, 0.06) 28%,
      rgba(72, 170, 255, 0) 52%
    );
  border-color: transparent;
  box-shadow: none;
  opacity: 0.92;
}

html[data-theme="dark"] .hero-gradient-ambient {
  background:
    radial-gradient(ellipse at calc(34% + var(--pointer-x) * 0.12) calc(30% + var(--pointer-y) * 0.1), rgba(226, 246, 255, 0.5) 0%, rgba(226, 246, 255, 0) 28%),
    radial-gradient(ellipse at calc(58% + var(--pointer-x) * 0.08) calc(52% + var(--pointer-y) * 0.08), rgba(100, 186, 255, 0.24) 0%, rgba(100, 186, 255, 0) 44%),
    radial-gradient(ellipse at calc(72% - var(--pointer-x) * 0.06) calc(38% - var(--pointer-y) * 0.08), rgba(182, 239, 255, 0.14) 0%, rgba(182, 239, 255, 0) 34%),
    radial-gradient(ellipse at calc(50% - var(--pointer-x) * 0.07) calc(72% - var(--pointer-y) * 0.08), rgba(70, 159, 255, 0.16) 0%, rgba(70, 159, 255, 0) 40%);
  filter: blur(34px) saturate(1) brightness(1.01);
  opacity: 0.74;
}

html[data-theme="dark"] .hero-gradient-main {
  background:
    radial-gradient(ellipse at calc(32% + var(--pointer-x) * 0.14) calc(28% + var(--pointer-y) * 0.12), rgba(244, 251, 255, 0.44) 0%, rgba(244, 251, 255, 0.12) 14%, rgba(244, 251, 255, 0) 34%),
    radial-gradient(ellipse at calc(56% + var(--pointer-x) * 0.1) calc(48% + var(--pointer-y) * 0.08), rgba(127, 199, 255, 0.38) 0%, rgba(127, 199, 255, 0.18) 20%, rgba(127, 199, 255, 0) 48%),
    radial-gradient(ellipse at calc(68% - var(--pointer-x) * 0.08) calc(36% - var(--pointer-y) * 0.08), rgba(180, 239, 255, 0.12) 0%, rgba(180, 239, 255, 0) 30%),
    radial-gradient(ellipse at calc(48% - var(--pointer-x) * 0.08) calc(78% - var(--pointer-y) * 0.1), rgba(72, 160, 255, 0.1) 0%, rgba(72, 160, 255, 0) 36%);
  filter: saturate(1) contrast(1.01) brightness(1.01);
  opacity: 0.9;
}

@keyframes heroFormFloat {
  0% {
    transform: translate3d(-1.2%, 0, 0) rotate(-2.2deg) scale(1, 1);
  }
  50% {
    transform: translate3d(-2.4%, -10px, 0) rotate(-4.1deg) scale(1.045, 0.955);
  }
  100% {
    transform: translate3d(-1.2%, 0, 0) rotate(-2.2deg) scale(1, 1);
  }
}

@keyframes heroLiquidShape {
  0% {
    border-radius: 58% 42% 55% 45% / 42% 56% 44% 58%;
  }
  33% {
    border-radius: 46% 54% 60% 40% / 38% 62% 36% 64%;
  }
  66% {
    border-radius: 62% 38% 44% 56% / 54% 40% 60% 46%;
  }
  100% {
    border-radius: 58% 42% 55% 45% / 42% 56% 44% 58%;
  }
}

@keyframes heroHaloDrift {
  0% {
    transform: translate3d(-3.5%, -1.5%, 0) scale(1.05, 0.97) rotate(-4deg);
    opacity: 0.7;
  }
  100% {
    transform: translate3d(-0.8%, 1.4%, 0) scale(1.12, 1.02) rotate(-1.5deg);
    opacity: 0.82;
  }
}

@keyframes heroTextureDrift {
  0% {
    transform: translate3d(-3.5%, -1.2%, 0) scale(1.08, 0.97) rotate(-3deg);
  }
  100% {
    transform: translate3d(-0.6%, 1%, 0) scale(1.13, 1.03) rotate(-0.8deg);
  }
}

@keyframes heroRimLight {
  0% {
    transform: translate3d(-2%, -1%, 0) scale(1.01);
    opacity: 0.56;
  }
  50% {
    transform: translate3d(1%, 0.5%, 0) scale(1.02);
    opacity: 0.74;
  }
  100% {
    transform: translate3d(2%, 1%, 0) scale(1.01);
    opacity: 0.62;
  }
}

.hero-copy {
  width: clamp(320px, 82vw, 980px);
  max-width: none;
  margin: 1.6rem auto 0;
  text-align: center;
  position: relative;
  z-index: 1;
}

.hero-copy p,
.case-intro,
.case-body p,
.detail-card p,
.about-copy p {
  margin: 0;
  font-family: "Mona Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 430;
}

.hero-copy p {
  max-width: none;
  margin: 0 auto;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
  font-weight: 400;
  text-wrap: balance;
}

.hero-copy p + p {
  margin-top: 1.35rem;
}

.hero-copy mark {
  background: color-mix(in srgb, var(--highlight) 94%, var(--platinum));
  color: var(--accent-text);
  padding: 0 0.15em;
}

.hero-subline {
  margin-top: 1.35rem;
  max-width: none;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  font-weight: 400;
  line-height: 1.3;
  text-wrap: balance;
}

.keep-together {
  white-space: nowrap;
}

.hero-link {
  display: inline;
  margin-top: 0;
  font-size: inherit;
  border-bottom: 1px solid currentColor;
}

.work-index,
.image-strip-section,
.about-section,
.process-section,
.contact-section,
.case-summary,
.case-details,
.case-next {
  padding: 3.6rem 0 0;
}

.section-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  position: relative;
}

.work-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}

.archive-mode-button {
  border: 1px solid color-mix(in srgb, var(--line) 36%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--text) 84%, transparent);
  padding: 0.38rem 0.65rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease;
}

.archive-mode-button:hover,
.archive-mode-button:focus-visible {
  border-color: color-mix(in srgb, var(--accent-secondary) 44%, var(--line));
  color: var(--text);
  background: color-mix(in srgb, var(--bg-elevated) 85%, transparent);
}

.section-title {
  margin: 0;
  font-family: "Mona Sans", sans-serif;
  font-size: 0.95rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.section-subtitle {
  margin: 0;
  font-family: "Mona Sans", sans-serif;
  font-size: 0.85rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.4;
  color: var(--text-secondary, #666);
}

.case-subsection-heading {
  margin-top: 3rem;
}

.case-subsection-title {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.35rem, 1.9vw, 1.7rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.work-table {
  width: 100%;
}

.work-head,
.work-row {
  display: grid;
  grid-template-columns: 70px minmax(0, 1.8fr) minmax(160px, 1fr) 70px;
  gap: 1rem;
  align-items: center;
}

.work-project {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.work-desc {
  font-size: 0.88rem;
  line-height: 1.5;
  opacity: 0.6;
  font-family: var(--sans);
}

.work-row:hover .work-desc,
.work-row:focus-visible .work-desc {
  opacity: 0.55;
}

.work-head {
  padding: 0.9rem 0;
}

.work-row {
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--soft-line);
  transition:
    background-color 180ms ease,
    padding-left 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.work-row:hover,
.work-row:focus-visible {
  background: var(--text);
  color: var(--bg);
  padding-left: 0.8rem;
  transform: translateY(-1px);
  box-shadow:
    inset 4px 0 0 var(--accent),
    0 18px 34px color-mix(in srgb, var(--accent-secondary) 14%, transparent);
}

.work-row--disabled {
  cursor: default;
}

.work-row--disabled:hover,
.work-row--disabled:focus-visible {
  background: transparent;
  color: inherit;
  padding-left: 0;
  transform: none;
  box-shadow: none;
}

.work-row--disabled:hover .work-number,
.work-row--disabled:hover .work-year,
.work-row--disabled:hover .work-type,
.work-row--disabled:focus-visible .work-number,
.work-row--disabled:focus-visible .work-year,
.work-row--disabled:focus-visible .work-type {
  color: var(--muted);
}

.work-row:hover .work-number,
.work-row:hover .work-year,
.work-row:hover .work-type,
.work-row:focus-visible .work-number,
.work-row:focus-visible .work-year,
.work-row:focus-visible .work-type {
  color: color-mix(in srgb, var(--bg) 72%, transparent);
}

.work-number,
.work-year {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.work-name {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
}

.case-title {
  font-size: clamp(1.6rem, 3vw, 2.5rem);
}

.work-type {
  letter-spacing: 0.12em;
}

body.archive-mode-open {
  overflow: hidden;
}

.archive-mode {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
}

.archive-mode[hidden] {
  display: none;
}

.archive-mode-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 32%, color-mix(in srgb, #ffffff 95%, transparent), color-mix(in srgb, #d9dbe0 96%, transparent)),
    color-mix(in srgb, var(--bg) 76%, white);
  backdrop-filter: blur(8px);
}

.archive-mode-shell {
  position: relative;
  width: min(94vw, 1460px);
  height: min(90vh, 860px);
  border: 1px solid color-mix(in srgb, var(--line) 38%, transparent);
  background: color-mix(in srgb, var(--bg) 92%, #f8f8fa);
  box-shadow: 0 24px 80px rgba(18, 18, 18, 0.12);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 0.55rem;
  padding: 1.1rem 1.15rem 1.2rem;
}

.archive-mode-page .archive-page-main {
  padding-top: 2.6rem;
  padding-bottom: 2.6rem;
}

.archive-mode-shell--page {
  width: 100%;
  height: min(80vh, 820px);
  margin-top: 1rem;
}

.archive-mode-page .site-shell {
  width: 100%;
  max-width: none;
}

.archive-space-main {
  position: relative;
  min-height: calc(100vh - var(--topbar-offset));
  overflow: hidden;
  background: #ededed;
}

.archive-space-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(ellipse at 32% 68%, color-mix(in srgb, #2055dc 6%, transparent), transparent 44%),
    radial-gradient(ellipse at 68% 38%, color-mix(in srgb, #c8ef3c 4%, transparent), transparent 38%);
  filter: blur(48px);
}

.archive-space-head {
  position: absolute;
  bottom: clamp(2rem, 5vw, 3.5rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 24;
  display: grid;
  gap: 0.4rem;
  width: clamp(280px, 44vw, 560px);
}

.archive-space-head-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.48rem;
  border-bottom: 1px solid color-mix(in srgb, #141414 18%, transparent);
}

.archive-space-title {
  margin: 0;
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(1rem, 1.26vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.archive-space-head .archive-mode-hint {
  max-width: 64ch;
  color: color-mix(in srgb, var(--text) 72%, transparent);
}

.archive-space-head .archive-mode-prompt {
  width: 100%;
}

.archive-space-head .archive-mode-feedback {
  color: color-mix(in srgb, var(--text) 52%, transparent);
}

.archive-space-tip {
  position: absolute;
  left: 50%;
  bottom: clamp(0.75rem, 2.4vw, 1.5rem);
  transform: translateX(-50%);
  z-index: 22;
  margin: 0;
  padding: 0.32rem 0.62rem;
  border: 1px solid color-mix(in srgb, #141414 12%, transparent);
  background: color-mix(in srgb, #ffffff 76%, transparent);
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 62%, transparent);
  white-space: nowrap;
}

.archive-space-tip kbd {
  display: inline-block;
  margin: 0 0.2rem;
  padding: 0.03rem 0.3rem;
  border: 1px solid color-mix(in srgb, #141414 18%, transparent);
  background: color-mix(in srgb, #ffffff 86%, transparent);
  font-size: 0.6rem;
  font-family: "Mona Sans", sans-serif;
  font-weight: 700;
  letter-spacing: 0.09em;
}

.archive-mode-close {
  justify-self: end;
  border: 1px solid color-mix(in srgb, var(--line) 34%, transparent);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  color: color-mix(in srgb, var(--text) 82%, transparent);
  padding: 0.36rem 0.6rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease;
}

.archive-mode-close:hover,
.archive-mode-close:focus-visible {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent-secondary) 44%, var(--line));
}

.archive-mode-head {
  display: grid;
  gap: 0.28rem;
}

.archive-mode-kicker {
  margin: 0;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 66%, transparent);
}

.archive-mode-hint {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--text) 74%, transparent);
}

.archive-mode-prompt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem;
  align-items: center;
  width: min(100%, 680px);
}

.archive-mode-input {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--line) 38%, transparent);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  color: var(--text);
  padding: 0.56rem 0.65rem;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  outline: none;
}

.archive-mode-input:focus-visible {
  border-color: color-mix(in srgb, var(--accent-secondary) 46%, var(--line));
}

.archive-mode-submit {
  border: 1px solid color-mix(in srgb, var(--line) 34%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--text) 82%, transparent);
  padding: 0.58rem 0.75rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.archive-mode-submit:hover,
.archive-mode-submit:focus-visible {
  border-color: color-mix(in srgb, var(--accent-secondary) 44%, var(--line));
  color: var(--text);
}

.archive-mode-feedback {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 56%, transparent);
}

.archive-mode-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  perspective: 1000px;
  background:
    radial-gradient(circle at 52% 78%, color-mix(in srgb, #2055dc 6%, transparent), transparent 44%),
    linear-gradient(180deg, color-mix(in srgb, #ffffff 92%, transparent), color-mix(in srgb, #f2f3f7 92%, transparent));
}

.archive-mode-stage--spatial {
  position: absolute;
  inset: 0;
  z-index: 8;
  perspective: 3200px;
  transform-style: preserve-3d;
  background: #ededed;
}

.archive-mode-stage--webgl {
  cursor: grab;
}

.archive-mode-stage--webgl:active {
  cursor: grabbing;
}

.archive-mode-stage--webgl .archive-webgl-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.archive-mode-stage--webgl::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 18%, rgba(237, 237, 237, 0.55) 60%, rgba(237, 237, 237, 0.82) 100%);
}

body.archive-webgl-enabled .archive-mode-stage--webgl .archive-thumb {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden;
  pointer-events: none !important;
  filter: none !important;
  transform: none !important;
}

body.archive-webgl-enabled .archive-mode-stage--webgl.has-focus .archive-thumb.is-focused {
  opacity: 0 !important;
}

.archive-thumb {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: clamp(132px, calc(10vw + var(--size) * 72px), 280px);
  display: grid;
  gap: 0.4rem;
  color: inherit;
  text-decoration: none;
  transform: translate3d(-50%, -50%, 0) rotate(var(--rot, 0deg));
  transform-origin: center center;
  will-change: left, top, transform, opacity, filter;
  transition:
    left 760ms cubic-bezier(0.22, 1, 0.36, 1),
    top 760ms cubic-bezier(0.22, 1, 0.36, 1),
    width 760ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 420ms ease,
    filter 420ms ease,
    transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
  animation: archive-thumb-drift var(--dur, 20s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
  z-index: 2;
}

.archive-mode-stage--spatial .archive-thumb {
  top: calc(var(--y) * 1%);
  transform:
    translate3d(
      calc(-50% + var(--drift-x, 0px)),
      calc(-50% + var(--drift-y, 0px)),
      calc(var(--base-z, 0px) + var(--drift-z, 0px))
    )
    rotateZ(var(--rot, 0deg))
    rotateY(var(--tilt-y, 0deg))
    rotateX(var(--tilt-x, 0deg));
  transform-style: preserve-3d;
  transition:
    left 900ms cubic-bezier(0.22, 1, 0.36, 1),
    top 900ms cubic-bezier(0.22, 1, 0.36, 1),
    width 900ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 480ms ease,
    filter 480ms ease,
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  animation: none;
}

.archive-thumb-media {
  aspect-ratio: 0.78 / 1;
  border: 1px solid color-mix(in srgb, var(--line) 30%, transparent);
  background-size: cover;
  background-position: center;
  transition: border-color 240ms ease, box-shadow 240ms ease, filter 240ms ease;
  box-shadow: 0 14px 30px rgba(15, 15, 15, 0.08);
}

.archive-mode-stage--spatial .archive-thumb-media {
  box-shadow:
    0 14px 38px rgba(16, 17, 26, 0.2),
    0 3px 12px rgba(16, 17, 26, 0.08);
}

.archive-thumb-caption {
  display: none;
}

.archive-thumb:hover,
.archive-thumb:focus-visible {
  z-index: 10;
}

.archive-mode-stage.has-focus .archive-thumb {
  opacity: 0.16;
  filter: blur(1.3px) saturate(0.72);
  pointer-events: none;
}

.archive-mode-stage.has-focus .archive-thumb.is-focused {
  left: 50%;
  top: 54%;
  width: clamp(260px, 34vw, 560px);
  transform: translate3d(-50%, -50%, 26px) rotate(0deg) scale(1.02);
  opacity: 1;
  filter: none;
  animation: none;
  pointer-events: auto;
  z-index: 12;
}

.archive-mode-stage--spatial.has-focus .archive-thumb.is-focused {
  width: clamp(270px, 32vw, 560px);
  left: 50%;
  top: 56%;
  transform:
    translate3d(
      calc(-50% + var(--drift-x, 0px) * 0.2),
      calc(-50% + var(--drift-y, 0px) * 0.2),
      260px
    )
    rotateZ(0deg)
    rotateY(calc(var(--tilt-y, 0deg) * 0.22))
    rotateX(calc(var(--tilt-x, 0deg) * 0.22))
    scale(1.02);
}

.archive-mode-stage.has-focus .archive-thumb.is-focused .archive-thumb-media {
  border-color: color-mix(in srgb, var(--accent-secondary) 44%, var(--line));
  box-shadow: 0 24px 55px rgba(20, 20, 20, 0.18);
}

.archive-thumb-media--passthrough {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
    url("./Interfaces/PassthroughUX/passthroughthumbnail.png");
}

.archive-thumb-media--workspace {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
    url("./System/SmartWorkspaceSetup/smartworkspace-thumbnail.png");
}

.archive-thumb-media--gesture {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.02)),
    url("./System/ContextAwareGesture/input-thumbnail.png");
}

.archive-thumb-media--frost {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.02)),
    url("./Environments/frost-thumb.png");
}

@keyframes archive-thumb-drift {
  0% {
    transform: translate3d(calc(-50% - 9px), calc(-50% - 8px), -6px) rotate(calc(var(--rot, 0deg) - 1.2deg));
  }
  50% {
    transform: translate3d(calc(-50% + 8px), calc(-50% + 7px), 8px) rotate(calc(var(--rot, 0deg) + 1deg));
  }
  100% {
    transform: translate3d(calc(-50% - 6px), calc(-50% + 10px), -4px) rotate(calc(var(--rot, 0deg) - 0.9deg));
  }
}

@media (max-width: 980px) {
  .work-header-actions {
    display: grid;
    justify-items: end;
    gap: 0.45rem;
  }

  .archive-mode-shell {
    width: 96vw;
    height: 92vh;
    padding: 0.9rem 0.85rem 0.95rem;
  }

  .archive-space-main {
    min-height: calc(100svh - var(--topbar-offset));
  }

  .archive-space-head {
    left: 1rem;
    right: 1rem;
    top: 0.85rem;
  }

  .archive-space-title {
    font-size: 0.94rem;
  }

  .archive-space-tip {
    display: none;
  }

  .archive-mode-kicker {
    font-size: 0.62rem;
  }

  .archive-mode-hint {
    font-size: 0.76rem;
  }

  .archive-mode-prompt {
    grid-template-columns: 1fr;
  }

  .archive-mode-submit {
    justify-self: start;
  }

  .archive-thumb {
    width: clamp(118px, 37vw, 188px);
  }

  .archive-mode-stage--spatial .archive-thumb {
    width: clamp(122px, 34vw, 208px);
  }

  .archive-mode-stage.has-focus .archive-thumb.is-focused {
    top: 58%;
    width: clamp(220px, 72vw, 360px);
  }

  .archive-mode-stage--spatial.has-focus .archive-thumb.is-focused {
    top: 60%;
    width: clamp(220px, 72vw, 360px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .archive-thumb {
    animation: none;
  }
}

.about-grid,
.process-grid,
.case-summary-grid,
.detail-grid {
  display: grid;
  gap: 1.5rem;
}

.about-grid,
.case-summary-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  align-items: start;
}

.about-note,
.fact-card,
.detail-card,
.next-card {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.about-section .about-note,
.process-section .detail-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}

.image-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.shipped-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 24rem);
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.6rem;
  scroll-padding-inline: 0.25rem;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent-secondary) 28%, var(--soft-line)) transparent;
}

.shipped-carousel::-webkit-scrollbar {
  height: 8px;
}

.shipped-carousel::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent-secondary) 28%, var(--soft-line));
  border-radius: 999px;
}

.shipped-carousel::-webkit-scrollbar-track {
  background: transparent;
}

.shipped-card {
  display: block;
  color: inherit;
  text-decoration: none;
  scroll-snap-align: start;
}

.shipped-card h3,
.shipped-card p {
  margin: 0;
  font-family: "Mona Sans", sans-serif;
}

.shipped-card h3 {
  margin-top: 0.85rem;
  font-size: 0.98rem;
  font-weight: 560;
  line-height: 1.45;
  transition: color 180ms ease;
}

.shipped-card p {
  margin-top: 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.shipped-media {
  aspect-ratio: 1.08 / 0.92;
  border: 1px solid color-mix(in srgb, var(--soft-line) 58%, transparent);
  background-color: color-mix(in srgb, var(--bg-elevated) 92%, var(--accent-secondary));
  background-size: cover;
  background-position: center;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--accent-secondary) 8%, transparent);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.shipped-card:hover .shipped-media,
.shipped-card:focus-within .shipped-media {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent-secondary) 24%, var(--soft-line));
  box-shadow: 0 20px 38px color-mix(in srgb, var(--accent-secondary) 14%, transparent);
}

.shipped-card:hover h3,
.shipped-card:focus-within h3 {
  color: var(--accent-secondary);
}

.shipped-media-01 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)),
    url("./Home/Galaxy-XR-1-scaled-1.jpg");
  background-position: 36% 52%;
  background-size: 148%;
}

.shipped-media-02 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)),
    url("./Home/EmotiBit.png");
  background-position: 50% 46%;
  background-size: 138%;
}

.shipped-media-03 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)),
    url("./Home/Skydeck.png");
  background-position: 50% 50%;
  background-size: 136%;
}

.shipped-media-04 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)),
    url("./Home/Fencing.png");
  background-position: 50% 48%;
  background-size: 136%;
}

.shipped-media-05 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)),
    url("./Environments/3H9B0365-Editar+copy.webp");
  background-position: 50% 44%;
  background-size: 138%;
}

.shipped-media-06 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)),
    url("./Home/EPS.png");
  background-position: 50% 50%;
  background-size: 138%;
}

.shipped-media-07 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)),
    url("./Interfaces/SpaceForm/SpaceForm-thumbnail copy.png");
  background-position: 50% 50%;
  background-size: 138%;
}

.strip-card p,
.case-caption {
  margin: 0.75rem 0 0;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.strip-media {
  aspect-ratio: 1.2 / 1;
  background: linear-gradient(180deg, rgba(17, 17, 17, 0.04), rgba(17, 17, 17, 0.08));
  box-shadow: var(--shadow-soft);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.strip-card:hover .strip-media,
.strip-card:focus-within .strip-media {
  transform: translateY(-3px);
  box-shadow: var(--shadow-medium);
}

.strip-media-01 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 26%),
    linear-gradient(180deg, #d8dce3, #b6c0cf);
}

.strip-media-02 {
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.3), transparent 30%),
    linear-gradient(180deg, #d9d4de, #c2bfcb);
}

.strip-media-03 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 20%),
    linear-gradient(180deg, #d5d1cb, #c2bdb4);
}

html[data-theme="dark"] .strip-media {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.08));
}

html[data-theme="dark"] .shipped-media-01,
html[data-theme="dark"] .shipped-media-02,
html[data-theme="dark"] .shipped-media-03,
html[data-theme="dark"] .shipped-media-04,
html[data-theme="dark"] .shipped-media-05,
html[data-theme="dark"] .shipped-media-06,
html[data-theme="dark"] .shipped-media-07 {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] .strip-media-01 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 26%),
    linear-gradient(180deg, #434b58, #2a3442);
}

html[data-theme="dark"] .strip-media-02 {
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.08), transparent 30%),
    linear-gradient(180deg, #47414c, #302e38);
}

html[data-theme="dark"] .strip-media-03 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 20%),
    linear-gradient(180deg, #403d39, #2c2a27);
}

.about-note,
.fact-card,
.detail-card {
  padding: 1.35rem;
}

.about-note p,
.fact-card strong,
.detail-card h3,
.next-card .next-title {
  margin: 0;
  font-family: "Mona Sans", sans-serif;
}

.about-note p,
.fact-card strong,
.detail-card h3 {
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 520;
}

.case-caption {
  font-family: "Mona Sans", sans-serif;
  font-variation-settings: "wght" 560, "wdth" 95, "opsz" 12;
}

.process-grid,
.detail-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.detail-card h3 {
  margin-bottom: 0.7rem;
}

.contact-card {
  padding: 3.6rem 0 5rem;
  border-top: 1px solid var(--line);
  position: relative;
}

.contact-card h2 {
  margin: 0 0 1rem;
  font-family: "Mona Sans", sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.35;
}

.contact-link {
  font-size: 1rem;
  border-bottom: 1px solid currentColor;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
  padding: 0.05em 0.1em;
}
.contact-link:hover {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}

.page-end {
  display: flex;
  justify-content: flex-end;
  padding-top: 1.2rem;
}

.back-to-top {
  border: 0;
  background: transparent;
  padding: 0.2em 0.4em;
  margin: -0.2em -0.4em;
  border-radius: 2px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}
.back-to-top:hover {
  background: var(--accent);
  color: var(--accent-text);
}

.about-note,
.fact-card,
.detail-card,
.next-card,
.case-media,
.about-portrait-image,
.about-portrait-placeholder {
  box-shadow: none;
}

.case-media,
.about-portrait-image,
.about-portrait-placeholder {
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.case-media:hover,
.case-media:focus-visible,
.about-portrait-image:hover,
.about-portrait-placeholder:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

.back-to-top:hover,
.back-to-top:focus-visible {
  color: var(--text);
}

@keyframes blobFloat {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    border-radius: 49% 51% 43% 57% / 42% 39% 61% 58%;
  }
  33% {
    transform: translate3d(0, -12px, 0) scale(1.03);
    border-radius: 45% 55% 47% 53% / 37% 45% 55% 63%;
  }
  66% {
    transform: translate3d(0, 8px, 0) scale(0.985);
    border-radius: 55% 45% 42% 58% / 47% 36% 64% 53%;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    border-radius: 49% 51% 43% 57% / 42% 39% 61% 58%;
  }
}

@keyframes blobSheen {
  0% {
    transform: translate3d(-4%, -2%, 0) scale(1.04);
  }
  100% {
    transform: translate3d(4%, 2%, 0) scale(1.1);
  }
}

@keyframes blobGradientShift {
  0% {
    background-position: 30% 34%, 68% 62%, 50% 50%;
  }
  50% {
    background-position: 34% 30%, 62% 66%, 46% 54%;
  }
  100% {
    background-position: 28% 38%, 70% 58%, 54% 48%;
  }
}

@keyframes blobBlurPulse {
  0% {
    filter: blur(8px);
    opacity: 0.9;
  }
  50% {
    filter: blur(16px);
    opacity: 1;
  }
  100% {
    filter: blur(8px);
    opacity: 0.9;
  }
}

@keyframes blobPulse {
  0% {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02), 0 16px 34px rgba(128, 156, 212, 0.08);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 56px rgba(128, 156, 212, 0.18);
  }
  100% {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02), 0 16px 34px rgba(128, 156, 212, 0.08);
  }
}


@keyframes blobDrift {
  0% {
    transform: translateY(-1%) scale(1.04);
  }
  50% {
    transform: translateY(2%) scale(1.06);
  }
  100% {
    transform: translateY(-1%) scale(1.04);
  }
}

.case-hero {
  padding: 4.7rem 0 1.2rem;
}

.case-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.case-title {
  margin-top: 1rem;
  line-height: 0.96;
}

.case-intro {
  max-width: 900px;
  margin-top: 1.5rem;
  font-size: 1.08rem;
  line-height: 1.75;
  font-weight: 520;
}

.case-media {
  width: min(860px, 100%);
  aspect-ratio: 1.7 / 1;
  margin-top: 2rem;
  border-radius: 0;
  background-size: cover;
  background-position: center;
}

.case-media-01 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 24%),
    linear-gradient(180deg, #d7dce3, #bec6d0);
}

.case-media-02 {
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.24), transparent 24%),
    linear-gradient(180deg, #dad3df, #c1bdca);
}

.case-media-03 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 24%),
    linear-gradient(180deg, #ddd8cf, #c2bcb2);
}

.case-media-04 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 24%),
    linear-gradient(180deg, #ddd7e0, #c2bcc8);
}

.case-media-watch {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 22%),
    radial-gradient(circle at 72% 32%, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0) 18%),
    linear-gradient(135deg, #2d3138 0%, #16181d 28%, #5d6876 72%, #c5d7f5 100%);
}

.case-media-watch::before {
  content: "";
  position: absolute;
  inset: 12% 38% 18% 18%;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 20%),
    linear-gradient(180deg, #2b2d31, #0f1114 58%, #2d3c54);
  transform: rotate(-14deg);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16);
}

.case-media-watch::after {
  content: "";
  position: absolute;
  width: 24%;
  aspect-ratio: 1 / 1;
  inset: 26% auto auto 33%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0) 22%),
    radial-gradient(circle at 50% 56%, rgba(15, 15, 18, 0.42), rgba(15, 15, 18, 0) 54%),
    linear-gradient(180deg, #31353c, #13161b);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.case-media-watch-overlay {
  position: absolute;
  inset: auto auto 12% 6%;
  display: grid;
  gap: 0.2rem;
  color: #f4f6fb;
}

.case-media-watch-overlay span,
.case-media-watch-overlay strong {
  font-family: "Mona Sans", sans-serif;
}

.case-media-watch-overlay span {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.8;
}

.case-media-watch-overlay strong {
  max-width: 22rem;
  font-size: clamp(1.45rem, 3vw, 2.4rem);
  line-height: 0.95;
  font-weight: 600;
}

.case-video {
  width: min(860px, 100%);
  aspect-ratio: 16 / 9;
  margin-top: 2rem;
}

.case-video iframe,
.case-video video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.case-quote-band {
  padding-top: 1rem;
}

.case-quote {
  padding: 2rem 2.2rem;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.case-quote p {
  margin: 0;
  max-width: 50rem;
  font-family: "Mona Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.8;
}

.case-quote p + p {
  margin-top: 0.9rem;
}

.spaceform-reflection {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.9rem, 3vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  max-width: 50rem;
  margin: 0;
  text-align: left;
}

.spaceform-outcome-block {
  max-width: none;
}

.spaceform-outcome-block p {
  max-width: none;
}

.spaceform-reflection-block {
  width: 100%;
  display: block;
  margin-top: 2.1rem;
  padding-top: 0.2rem;
}

.spaceform-break {
  font-family: "Cormorant Garamond", serif !important;
  font-size: clamp(1.55rem, 2.4vw, 2.2rem) !important;
  line-height: 1.2 !important;
  max-width: none !important;
  width: 100%;
  margin: 0 auto;
  text-align: center !important;
  text-wrap: balance;
}

.case-system-section,
.case-research-section,
.case-gestures-section,
.case-prototype-section {
  padding-top: 1.2rem;
}

.case-pillars,
.gesture-grid,
.prototype-media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
}

.pillar-card,
.timeline-panel,
.gesture-card,
.prototype-panel,
.prototype-media-card {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.pillar-card,
.timeline-panel,
.gesture-card,
.prototype-panel {
  padding: 1.35rem;
}

.pillar-card h3,
.timeline-panel h3,
.gesture-card h3,
.prototype-copy h3 {
  margin: 0 0 0.55rem;
  font-family: "Mona Sans", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.pillar-card p,
.timeline-panel p,
.gesture-card p,
.prototype-copy p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.65;
}

.pillar-icon {
  width: 2.3rem;
  height: 2.3rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0) 30%),
    linear-gradient(180deg, #dbe5f5, #b6c4dc);
}

.case-research-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 1.5rem;
  align-items: start;
}

.timeline-stack {
  display: grid;
  gap: 1rem;
}

.timeline-line {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: center;
  margin-top: 1rem;
}

.timeline-line span {
  position: relative;
  display: block;
  height: 2.5rem;
}

.timeline-line span::before,
.timeline-line span::after {
  content: "";
  position: absolute;
}

.timeline-line span::before {
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--soft-line);
}

.timeline-line span::after {
  width: 0.72rem;
  height: 0.72rem;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #77c8ff;
  box-shadow: 0 0 0 4px color-mix(in srgb, #77c8ff 18%, transparent);
}

.timeline-line-alt span:nth-child(2n)::after {
  background: #b6dfff;
}

.gesture-figure {
  aspect-ratio: 1.25 / 1;
  margin-bottom: 1rem;
  background-color: #0d1015;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.86) 0 0.08rem, transparent 0.09rem),
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 22px 22px, 22px 22px, 22px 22px;
  background-position: center;
}

.gesture-figure-left {
  background-image:
    radial-gradient(circle at 38% 50%, rgba(255, 255, 255, 0.9) 0 0.08rem, transparent 0.09rem),
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
}

.gesture-figure-center {
  background-image:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.9) 0 0.08rem, transparent 0.09rem),
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
}

.gesture-figure-right {
  background-image:
    radial-gradient(circle at 62% 50%, rgba(255, 255, 255, 0.9) 0 0.08rem, transparent 0.09rem),
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
}

.prototype-stack {
  display: grid;
  gap: 1rem;
  margin-top: 1.2rem;
}

.prototype-panel {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 1.2rem;
  align-items: center;
}

.prototype-disc {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.12) 0 1px, transparent 1.5px),
    radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.28), transparent 24%),
    linear-gradient(180deg, #181b21, #0f1114);
  background-size: 18px 18px, cover, cover;
  box-shadow: none;
}

.prototype-disc-alt {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.12) 0 1px, transparent 1.5px),
    radial-gradient(circle at 62% 32%, rgba(255, 255, 255, 0.2), transparent 24%),
    linear-gradient(180deg, #13161a, #090b0e);
  background-size: 18px 18px, cover, cover;
}

.prototype-media-card {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.case-inline-image {
  display: block;
  width: 100%;
  height: auto;
}

[data-fullscreen-image] {
  cursor: zoom-in;
}

[data-fullscreen-image]:focus-visible {
  outline: 2px solid var(--accent-secondary);
  outline-offset: 4px;
}

.input-fluency-zoomable {
  cursor: zoom-in;
}

.input-fluency-zoomable:focus-visible {
  outline: 2px solid var(--accent-secondary);
  outline-offset: 4px;
}

.input-fluency-natural-media {
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  backdrop-filter: none !important;
}

body.viewer-open {
  overflow: hidden;
}

.fullscreen-viewer {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: 2.5rem;
}

.fullscreen-viewer[hidden] {
  display: none;
}

.fullscreen-viewer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.88);
  backdrop-filter: blur(10px);
}

.fullscreen-viewer-figure {
  position: relative;
  z-index: 1;
  margin: 0;
  width: min(92vw, 1600px);
  max-height: 88vh;
  display: grid;
  place-items: center;
}

.fullscreen-viewer-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 88vh;
  object-fit: contain;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
}

.fullscreen-viewer-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(20, 20, 20, 0.72);
  color: #f4f2ee;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.case-inline-video {
  display: block;
  width: 100%;
  height: auto;
}

.input-fluency-page .case-hero {
  padding: 4.6rem 0 1.8rem;
}

.input-fluency-page .case-summary,
.input-fluency-page .case-details,
.input-fluency-page .case-system-section,
.input-fluency-page .case-research-section,
.input-fluency-page .case-prototype-section,
.input-fluency-page .case-next {
  padding-top: 6rem;
}

.input-fluency-page .section-header {
  margin-bottom: 1.8rem;
}

.input-fluency-page .spaceform-bullet-list {
  gap: 0.2rem;
  margin: 0.3rem 0 0.5rem;
}

.input-fluency-page .spaceform-bullet-list p {
  font-size: 0.96rem;
  line-height: 1.5;
}

.input-fluency-page .case-summary-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.75fr);
  gap: 2.4rem;
  align-items: start;
}

.input-fluency-page .case-facts {
  display: grid;
  gap: 1.45rem;
  align-content: start;
}

.input-fluency-page .fact-card {
  padding: 0;
}

.input-fluency-page .fact-card p {
  font-size: 0.88rem;
  line-height: 1.65;
  margin-top: 0.35rem;
  color: var(--muted);
}

.input-fluency-page .fact-card strong {
  display: inline;
  font-size: 0.97rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  margin: 0;
}

.input-fluency-page .case-body p,
.input-fluency-page .spaceform-editorial-intro p {
  max-width: none;
}

.input-fluency-page .spaceform-editorial-intro {
  display: grid;
  gap: 1rem;
}

.input-fluency-page .distributed-hero-media,
.input-fluency-page .distributed-figure-wide {
  margin-top: 1.55rem;
}

.input-fluency-problem-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.85rem;
}

.input-fluency-problem-card {
  min-height: 11.5rem;
  padding: 1.55rem 1.65rem 1.7rem;
  border: 1px solid color-mix(in srgb, var(--soft-line) 62%, transparent);
  background: color-mix(in srgb, var(--bg) 98%, transparent);
}

.input-fluency-problem-card h3,
.input-fluency-problem-card p {
  margin: 0;
}

.input-fluency-problem-card h3 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.55rem, 2vw, 1.95rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.input-fluency-problem-card p {
  margin-top: 0.95rem;
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(0.92rem, 1vw, 0.98rem);
  line-height: 1.72;
  font-weight: 430;
  color: color-mix(in srgb, var(--text) 74%, transparent);
  max-width: 36ch;
  text-wrap: pretty;
}

.input-fluency-tradeoff-note {
  width: 100%;
  margin-top: 2.4rem;
  padding-top: 0.95rem;
  border-top: 1px solid color-mix(in srgb, var(--soft-line) 70%, transparent);
}

.input-fluency-tradeoff-note-kicker {
  display: block;
  margin-bottom: 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.input-fluency-tradeoff-note p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.72;
  color: var(--muted);
  max-width: 72rem;
}

.input-fluency-tradeoff-note p + p {
  margin-top: 0.8rem;
}

.input-fluency-arbitration-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1.4rem;
}

.input-fluency-arbitration-card {
  min-height: 8.75rem;
  padding: 1.15rem 1.2rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--soft-line) 62%, transparent);
  background: color-mix(in srgb, var(--bg) 98%, transparent);
}

.input-fluency-arbitration-pill {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.82rem;
  margin-bottom: 0.8rem;
  border: 1px solid color-mix(in srgb, var(--soft-line) 70%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
}

.input-fluency-arbitration-pill::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 8%, transparent);
}

.input-fluency-arbitration-pill--baseline::before {
  background: color-mix(in srgb, var(--line) 78%, var(--accent));
}

.input-fluency-arbitration-pill--north-star::before {
  background: color-mix(in srgb, var(--accent-secondary) 78%, white);
}

.input-fluency-arbitration-card h3,
.input-fluency-arbitration-card p {
  margin: 0;
}

.input-fluency-arbitration-card h3 {
  font-family: "Mona Sans", sans-serif;
  font-size: 0.96rem;
  font-weight: 650;
  line-height: 1.22;
  letter-spacing: -0.01em;
}

.input-fluency-page .input-fluency-arbitration-card p {
  margin-top: 0.55rem;
  font-size: 0.95rem;
  line-height: 1.72;
  font-weight: 430;
  color: var(--muted);
  max-width: none;
  text-wrap: pretty;
}

.input-fluency-page .distributed-scenario-card .spaceform-editorial-intro {
  gap: 0;
}

.input-fluency-page .distributed-scenario-card h3 {
  font-size: 0.96rem;
  font-weight: 650;
  line-height: 1.22;
  letter-spacing: -0.01em;
}

.input-fluency-page .distributed-scenario-card p {
  margin-top: 0.55rem;
  font-size: 0.84rem;
  line-height: 1.5;
  font-weight: 430;
  color: color-mix(in srgb, var(--text) 54%, transparent);
  max-width: none;
  text-wrap: pretty;
}

.input-fluency-system-diagram {
  position: relative;
  overflow: hidden;
  margin-top: 1.4rem;
  padding: clamp(1rem, 2vw, 1.45rem);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.input-fluency-system-diagram::before {
  content: none;
}

.input-fluency-system-diagram-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) 26px minmax(320px, 1.05fr) 40px minmax(0, 0.96fr);
  gap: clamp(0.72rem, 1.35vw, 1rem);
  align-items: stretch;
  height: clamp(420px, 58vh, 520px);
}

.input-fluency-system-stage {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.58rem;
  min-width: 0;
}

.input-fluency-system-label {
  width: min(12rem, 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.46rem 0.84rem;
  border: 1px solid var(--soft-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  box-shadow:
    0 8px 22px rgba(17, 17, 17, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.input-fluency-system-label::before {
  content: "";
  width: 0.58rem;
  height: 0.58rem;
  border-radius: 999px;
  background: var(--line);
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 6%, transparent);
}

.input-fluency-system-stage-input .input-fluency-system-label::before {
  background: color-mix(in srgb, var(--line) 82%, var(--accent));
}

.input-fluency-system-stage-interpretation .input-fluency-system-label::before {
  background: color-mix(in srgb, var(--accent) 72%, var(--line));
}

.input-fluency-system-stage-output .input-fluency-system-label::before {
  background: color-mix(in srgb, #7aa2ff 72%, var(--line));
}

.input-fluency-system-panel {
  display: grid;
  gap: 0.62rem;
  padding: clamp(0.72rem, 1vw, 0.86rem);
  border: 1px solid color-mix(in srgb, var(--soft-line) 55%, transparent);
  border-radius: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 94%, transparent), color-mix(in srgb, var(--bg-elevated) 96%, transparent));
  backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 8px 18px rgba(17, 17, 17, 0.025);
}

.input-fluency-system-stage-input .input-fluency-system-panel,
.input-fluency-system-stage-output .input-fluency-system-panel {
  min-height: 100%;
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.input-fluency-system-panel-interpretation {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, minmax(0, 1fr));
}

.input-fluency-system-card {
  min-height: 0;
  display: grid;
  align-content: center;
  gap: 0.22rem;
  padding: 0.72rem 0.82rem 0.78rem;
  border: 1px solid color-mix(in srgb, var(--soft-line) 38%, transparent);
  border-radius: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 97%, transparent), color-mix(in srgb, var(--bg) 94%, transparent));
  box-shadow:
    0 4px 10px rgba(17, 17, 17, 0.018),
    inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.input-fluency-system-card-kicker {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.08rem;
}

.input-fluency-system-card h3 {
  margin: 0;
  font-size: clamp(0.9rem, 0.96vw, 1.02rem);
  line-height: 1.14;
  font-weight: 620;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.input-fluency-system-card p {
  margin: 0;
  font-size: clamp(0.75rem, 0.78vw, 0.85rem);
  line-height: 1.28;
  color: var(--muted);
  max-width: 24ch;
  text-wrap: pretty;
}

.input-fluency-system-connector {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  align-self: start;
  height: calc(100% - 2.2rem);
  margin-top: 2.2rem;
}

.input-fluency-system-connector svg {
  width: auto;
  height: auto;
  display: block;
  overflow: visible;
}

.input-fluency-system-connector path {
  fill: none;
  stroke: color-mix(in srgb, var(--text) 86%, transparent);
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.input-fluency-system-connector-inline svg {
  width: 24px;
  height: 16px;
  overflow: visible;
  align-self: center;
}

.input-fluency-system-connector-branch {
  padding: 0.72rem 0.1rem 0.78rem;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
}

.input-fluency-system-connector-branch svg {
  width: 24px;
  height: 16px;
  overflow: visible;
}

.input-fluency-system-stage-input .input-fluency-system-card:first-child,
.input-fluency-system-stage-output .input-fluency-system-card:first-child {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 97%, transparent), color-mix(in srgb, var(--bg) 94%, rgba(200, 239, 60, 0.06)));
}

.input-fluency-system-stage-interpretation .input-fluency-system-card:nth-child(2) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 97%, transparent), color-mix(in srgb, var(--bg) 94%, rgba(200, 239, 60, 0.05)));
}

.input-fluency-system-stage-output .input-fluency-system-card:nth-child(2) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 97%, transparent), color-mix(in srgb, var(--bg) 94%, rgba(122, 162, 255, 0.06)));
}

.input-fluency-system-caption {
  position: relative;
  z-index: 1;
  margin-top: 0.7rem;
  font-size: 0.8rem;
  line-height: 1.42;
  color: var(--muted);
  max-width: 58rem;
}

.input-fluency-page .distributed-hero-media {
  width: min(1080px, 100%);
}

.input-fluency-split {
  display: grid;
  grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.24fr);
  gap: 2.1rem;
  align-items: start;
}

.input-fluency-block {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.input-fluency-flow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
  align-items: start;
}

.input-fluency-flow-card {
  display: grid;
  gap: 0.9rem;
}

.input-fluency-flow-card-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--surface);
  border-radius: 6px;
}

.input-fluency-flow-card .case-inline-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.input-fluency-flow-card h3 {
  margin: 0;
  font-family: "Mona Sans", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.input-fluency-flow-card p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.62;
  font-weight: 430;
  color: color-mix(in srgb, var(--text) 54%, transparent);
  max-width: 30ch;
  text-wrap: pretty;
}

.input-fluency-media-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.input-fluency-intro-split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem;
}

.input-fluency-intro-split .section-header {
  margin-bottom: 1.3rem;
}

.input-fluency-intro-split .spaceform-editorial-intro {
  max-width: none;
  display: grid;
  gap: 1.7rem;
}

.input-fluency-opening-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 4vw, 4rem);
  align-items: start;
}

.input-fluency-opening-grid .input-fluency-block {
  min-width: 0;
}

.input-fluency-opening-grid .section-header {
  width: 100%;
  margin-bottom: 1.3rem;
}

.input-fluency-opening-grid .spaceform-editorial-intro {
  max-width: none;
  display: grid;
  gap: 1.4rem;
}

.input-fluency-direction-split {
  grid-template-columns: minmax(0, 1fr) 21rem;
  gap: 3.4rem;
  align-items: start;
}

.input-fluency-direction-split .spaceform-editorial-intro {
  max-width: none;
}

.input-fluency-direction-split .section-header {
  margin-bottom: 1.55rem;
}

.input-fluency-direction-split .spaceform-editorial-intro {
  display: grid;
  gap: 1.8rem;
}

.input-fluency-direction-media {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
}

.input-fluency-direction-media .input-fluency-media-pair {
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  align-content: start;
  width: 21rem;
}

.input-fluency-direction-media .input-fluency-media-pair .distributed-figure-wide {
  width: 21rem;
  margin-left: auto;
}

.input-fluency-reference-figure {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 50%;
  justify-self: end;
}

.input-fluency-reference-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transform-origin: center;
}

.input-fluency-page .input-fluency-split + .distributed-figure-wide,
.input-fluency-page .spaceform-editorial-intro + .input-fluency-flow-grid,
.input-fluency-page .distributed-two-up {
  margin-top: 1.5rem;
}

.spaceform-page .case-hero {
  padding: 4.4rem 0 1.2rem;
}

.spaceform-page .case-intro + .case-intro {
  margin-top: 0.7rem;
}

.spaceform-page .site-shell {
  overflow-x: clip;
}

.spaceform-page .case-intro:first-of-type {
  font-weight: 650;
}

.spaceform-page .case-summary,
.spaceform-page .case-details,
.spaceform-page .case-system-section,
.spaceform-page .case-research-section,
.spaceform-page .case-prototype-section,
.spaceform-page .case-next {
  padding-top: 3.4rem;
}

.spaceform-page .case-summary-grid,
.spaceform-page .detail-grid,
.spaceform-page .case-research-grid,
.spaceform-page .prototype-media-grid {
  gap: 1.5rem;
}

.spaceform-page .fact-card {
  padding: 0;
}

.spaceform-page .fact-card p {
  font-size: 0.88rem;
  line-height: 1.65;
  margin-top: 0.35rem;
  color: var(--muted);
}

.spaceform-page .fact-card strong {
  display: inline;
  font-size: 0.97rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  margin: 0;
}

.spaceform-page .detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem;
  align-items: start;
}

.spaceform-page .prototype-media-grid {
  align-items: start;
}

.spaceform-page .prototype-panel,
.spaceform-page .timeline-panel,
.spaceform-page .detail-card {
  padding: 0;
}

.spaceform-page .section-header {
  margin-bottom: 1.65rem;
}

.spaceform-page .case-quote {
  padding: 3.2rem 0 2.8rem;
  display: flex;
  justify-content: center;
}

.spaceform-page .case-video {
  width: min(1120px, 100%);
  margin-top: 2.4rem;
}

.spaceform-page .case-body p {
  max-width: none;
}

.spaceform-page .detail-card p,
.spaceform-page .timeline-panel p,
.spaceform-page .prototype-copy p {
  max-width: none;
}

.spaceform-page .detail-card h3 {
  margin: 0 0 0.9rem;
}

.spaceform-page .detail-card > p:first-of-type {
  margin-top: 0;
}

.spaceform-page .detail-card > p + .spaceform-bullet-list,
.spaceform-page .detail-card > .spaceform-bullet-list + p {
  margin-top: 1rem;
}

.spaceform-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: 2.4rem;
  align-items: start;
}

.spaceform-media-wide,
.spaceform-media-pair,
.spaceform-media-triple {
  margin-top: 1.65rem;
}

.spaceform-media-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.case-video-wide {
  width: min(1120px, 100%);
}

.spaceform-page .case-caption {
  max-width: 46rem;
  margin-top: 0.75rem;
}

.spaceform-editorial-intro {
  max-width: none;
}

.spaceform-editorial-intro h3 {
  margin: 0 0 0.85rem;
  font-family: "Mona Sans", sans-serif;
  font-size: 1rem;
  font-weight: 600;
}

.spaceform-editorial-intro p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.8;
}

.spaceform-editorial-intro p + p {
  margin-top: 1.1rem;
}

.spaceform-media-pair + .spaceform-editorial-intro {
  margin-top: 1.75rem;
}

.spaceform-bullet-list {
  display: grid;
  gap: 0.7rem;
  margin: 1rem 0 1.2rem;
}

.spaceform-bullet-list p {
  margin: 0;
  padding-left: 1.2rem;
  position: relative;
  font-size: 1rem;
  line-height: 1.75;
}

.spaceform-bullet-list p::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
}

.spaceform-text-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.6rem;
  margin-top: 1rem;
  counter-reset: spaceform-decision;
}

.spaceform-text-card {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  min-height: 100%;
  padding: 1.2rem 1.15rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--soft-line) 58%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, transparent), color-mix(in srgb, var(--bg-elevated) 97%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 8px 18px rgba(17, 17, 17, 0.022);
}

.spaceform-text-card::before {
  counter-increment: spaceform-decision;
  content: "Layer " counter(spaceform-decision, decimal-leading-zero);
  margin: 0;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.2;
  color: color-mix(in srgb, var(--text) 52%, transparent);
}

.spaceform-text-card h3 {
  margin: 0;
  font-family: "Mona Sans", sans-serif;
  font-size: 1.02rem;
  font-weight: 620;
  line-height: 1.4;
}

.spaceform-text-card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.68;
  color: color-mix(in srgb, var(--text) 78%, transparent);
  max-width: none;
}

.spaceform-page .spaceform-text-card[data-gallery-card] {
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.spaceform-page .spaceform-text-card[data-gallery-card]:hover {
  border-color: color-mix(in srgb, var(--accent-secondary) 26%, var(--soft-line));
}

.spaceform-page .spaceform-text-card[data-gallery-card]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-secondary) 48%, transparent);
  outline-offset: 2px;
}

.spaceform-page .spaceform-text-card.is-active-card {
  border-color: color-mix(in srgb, var(--accent-secondary) 40%, var(--soft-line));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 10px 20px rgba(17, 17, 17, 0.03);
}

.spaceform-page .spaceform-hierarchy-gallery-shell {
  display: flex;
  flex-direction: column;
  margin-top: 1.6rem;
}

.spaceform-page .spaceform-hierarchy-gallery-shell .rules-gallery-controls {
  order: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 100%;
  gap: 1.2rem;
  margin-top: 0.9rem;
}

.spaceform-page .spaceform-hierarchy-gallery-shell .rules-gallery-dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.spaceform-page .spaceform-hierarchy-gallery-shell .rules-gallery-nav {
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--soft-line) 62%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg-elevated) 98%, transparent);
  color: var(--text);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  opacity: 0.5;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.spaceform-page .spaceform-hierarchy-gallery-shell .rules-gallery-nav:hover {
  opacity: 1;
  border-color: var(--text);
}

.spaceform-page .spaceform-hierarchy-gallery-shell .rules-gallery-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: none;
  background: var(--text);
  opacity: 0.2;
  cursor: pointer;
  padding: 0;
  transition: opacity 200ms ease, transform 200ms ease;
}

.spaceform-page .spaceform-hierarchy-gallery-shell .rules-gallery-dot.is-active {
  opacity: 0.85;
  transform: scale(1.35);
}

.spaceform-page .spaceform-hierarchy-gallery-shell .rules-gallery-carousel {
  order: 1;
  position: relative;
  display: grid;
  width: 100%;
  overflow: hidden;
}

.spaceform-page .spaceform-hierarchy-gallery-shell .rules-gallery-slide {
  grid-area: 1 / 1;
  margin: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.55rem;
  padding: 0.8rem;
  border: 1px solid color-mix(in srgb, var(--soft-line) 58%, transparent);
  background: color-mix(in srgb, var(--bg-elevated) 98%, transparent);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: none;
  will-change: opacity, transform;
  animation: spaceform-gallery-fade-in 280ms ease forwards;
}

.spaceform-page .spaceform-hierarchy-gallery-shell .rules-gallery-slide .case-inline-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
}

.spaceform-page .spaceform-hierarchy-gallery-shell .rules-gallery-slide figcaption {
  margin: 0;
  align-self: end;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: color-mix(in srgb, var(--text) 64%, transparent);
}

.spaceform-page .spaceform-hierarchy-gallery-shell .rules-gallery-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  z-index: 1;
}

.spaceform-page .spaceform-hierarchy-gallery-shell .rules-gallery-slide.is-leaving {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  animation: spaceform-gallery-fade-out 180ms ease forwards;
  position: absolute;
  inset: 0;
  z-index: 2;
}

.spaceform-page .spaceform-gallery-link {
  display: block;
}

.spaceform-page .spaceform-impact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: 2.1rem;
}

.spaceform-page .spaceform-impact-card {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  min-height: 100%;
  padding: 1.25rem 1.2rem 1.3rem;
  border: 1px solid color-mix(in srgb, var(--soft-line) 58%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, transparent), color-mix(in srgb, var(--bg-elevated) 97%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 8px 18px rgba(17, 17, 17, 0.022);
}

.spaceform-page .spaceform-impact-card .rules-card-label {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 52%, transparent);
}

.spaceform-page .spaceform-impact-card .rules-card-title {
  margin: 0;
  font-family: "Mona Sans", sans-serif;
  font-size: 1.02rem;
  font-weight: 620;
  line-height: 1.4;
}

.spaceform-page .spaceform-impact-card p {
  margin: 0;
  max-width: none;
}

.spaceform-page .spaceform-impact-card .rules-card-title + p {
  font-size: 0.95rem;
  line-height: 1.68;
  color: color-mix(in srgb, var(--text) 78%, transparent);
}

@keyframes spaceform-gallery-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes spaceform-gallery-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.spaceform-placeholder {
  display: grid;
  place-items: center;
  margin: 1.8rem 0 0;
  min-height: 380px;
  background:
    radial-gradient(circle, rgba(0, 0, 0, 0.14) 0 1px, transparent 1.1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06));
  background-size: 14px 14px, cover;
  color: var(--muted);
}

.spaceform-placeholder span {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.case-hero-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 420px;
  background:
    radial-gradient(circle, rgba(0, 0, 0, 0.1) 0 1px, transparent 1.1px),
    #f9f9f9;
  background-size: 18px 18px, cover;
}

html[data-theme="dark"] .case-hero-placeholder {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.1) 0 1px, transparent 1.1px),
    #111214;
  background-size: 18px 18px, cover;
}

.case-hero-placeholder span {
  font-family: "Mona Sans", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.5;
}

.spaceform-media-pair--wide {
  align-items: start;
}

.spaceform-media-pair--triple {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.spaceform-summary-grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  align-items: start;
}

.spaceform-dual-section {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(260px, 0.72fr);
  gap: 2.5rem;
  align-items: start;
}

.spaceform-dual-column .section-header {
  margin-bottom: 1.25rem;
}

.spaceform-split {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: 2rem;
  align-items: start;
}

.spaceform-split-balanced {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
  gap: 2.25rem;
}

.spaceform-split-narrow-aside {
  grid-template-columns: minmax(0, 1.28fr) minmax(260px, 0.72fr);
  gap: 2.5rem;
}

.spaceform-split-media-first {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
}

.spaceform-split-copy {
  display: grid;
  gap: 1rem;
}

.spaceform-split-copy h3 {
  margin: 0 0 0.2rem;
  font-family: "Mona Sans", sans-serif;
  font-size: 1rem;
  font-weight: 600;
}

.spaceform-split-copy p {
  margin: 0;
  max-width: none;
  font-size: 1rem;
  line-height: 1.78;
}

.spaceform-page .spaceform-copy-card {
  display: grid;
  align-content: start;
  gap: 0.85rem;
  min-height: 100%;
  padding: 1.2rem 1.15rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--soft-line) 58%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, transparent), color-mix(in srgb, var(--bg-elevated) 97%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 8px 18px rgba(17, 17, 17, 0.022);
}

.spaceform-page .spaceform-copy-card h3,
.spaceform-page .spaceform-copy-card p {
  margin: 0;
}

.spaceform-page .spaceform-copy-card h3 {
  font-size: 1.02rem;
  font-weight: 620;
  line-height: 1.4;
}

.spaceform-page .spaceform-copy-card p {
  font-size: 0.95rem;
  line-height: 1.68;
  color: color-mix(in srgb, var(--text) 78%, transparent);
}

.spaceform-meta-column {
  align-self: start;
  display: grid;
  gap: 0.55rem;
  padding-top: 0.1rem;
}

.spaceform-meta-column p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
}

.spaceform-meta-column h3 {
  margin: 0 0 0.85rem;
  font-family: "Mona Sans", sans-serif;
  font-size: 1rem;
  font-weight: 600;
}

.spaceform-meta-column strong {
  font-weight: 700;
}

.spaceform-split-media {
  margin: 0;
}

.spaceform-feature .spaceform-split + .spaceform-split {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid color-mix(in srgb, var(--line) 42%, transparent);
}

.spaceform-split-aside {
  display: grid;
  gap: 1rem;
}

.spaceform-integration-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 1.5rem;
  align-items: stretch;
  margin-top: 1rem;
}

.spaceform-integration-item {
  display: grid;
  grid-template-rows: minmax(0, 1fr) clamp(260px, 21vw, 340px);
  gap: 1rem;
  align-content: start;
  height: 100%;
  min-height: 100%;
  padding: 1.2rem 1.15rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--soft-line) 58%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, transparent), color-mix(in srgb, var(--bg-elevated) 97%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 8px 18px rgba(17, 17, 17, 0.022);
}

.spaceform-integration-item .spaceform-split-copy {
  gap: 0.85rem;
}

.spaceform-integration-item .spaceform-split-copy h3,
.spaceform-integration-item .spaceform-split-copy p {
  margin: 0;
}

.spaceform-integration-item .spaceform-split-copy h3 {
  font-size: 1.02rem;
  font-weight: 620;
  line-height: 1.4;
}

.spaceform-integration-item .spaceform-split-copy p {
  font-size: 0.95rem;
  line-height: 1.68;
  color: color-mix(in srgb, var(--text) 78%, transparent);
}

.spaceform-integration-media {
  margin: 0;
  height: 100%;
  border: 1px solid color-mix(in srgb, var(--line) 36%, transparent);
  overflow: hidden;
}

.spaceform-integration-media .case-inline-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spaceform-platform-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
}

.spaceform-platform-card {
  display: grid;
  grid-template-rows: auto auto;
  gap: 1rem;
  align-content: start;
  min-height: 100%;
  padding: 1.2rem;
  border: 1px solid color-mix(in srgb, var(--soft-line) 58%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, transparent), color-mix(in srgb, var(--bg-elevated) 97%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 8px 18px rgba(17, 17, 17, 0.022);
}

.spaceform-platform-card .timeline-panel {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: 0;
}

.spaceform-platform-media {
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--line) 36%, transparent);
  overflow: hidden;
}

.spaceform-platform-media .case-inline-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.spaceform-platform-card .detail-label,
.spaceform-platform-card h3,
.spaceform-platform-card p {
  margin: 0;
}

.spaceform-platform-card .detail-label {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  color: color-mix(in srgb, var(--text) 52%, transparent);
}

.spaceform-platform-card h3 {
  font-family: "Mona Sans", sans-serif;
  font-size: 1.02rem;
  font-weight: 620;
  line-height: 1.4;
}

.spaceform-platform-card p {
  max-width: none;
  font-size: 0.95rem;
  line-height: 1.68;
  color: color-mix(in srgb, var(--text) 78%, transparent);
}

.spaceform-principles {
  margin-top: 1.6rem;
}

.spaceform-principles-header {
  margin-bottom: 1rem;
}

.spaceform-principles-header h3 {
  margin: 0;
  font-family: "Mona Sans", sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.spaceform-principles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  counter-reset: spaceform-principle;
}

.spaceform-principle {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  min-height: 100%;
  padding: 1.2rem 1.15rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--soft-line) 58%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, transparent), color-mix(in srgb, var(--bg-elevated) 97%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 8px 18px rgba(17, 17, 17, 0.022);
}

.spaceform-principle::before {
  counter-increment: spaceform-principle;
  content: "Principle " counter(spaceform-principle, decimal-leading-zero);
  margin: 0;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.2;
  color: color-mix(in srgb, var(--text) 52%, transparent);
}

.spaceform-principle h4 {
  margin: 0;
  font-family: "Mona Sans", sans-serif;
  font-size: 1.02rem;
  font-weight: 620;
  line-height: 1.4;
}

.spaceform-principle p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.68;
  color: color-mix(in srgb, var(--text) 78%, transparent);
}

.spaceform-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.spaceform-compare-card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 1rem;
  align-content: start;
}

.spaceform-compare-card .spaceform-editorial-intro {
  min-height: 13.5rem;
}

.spaceform-compare-card .prototype-media-card {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
}

.spaceform-compare-card .case-inline-image {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.spaceform-compare-label {
  margin: 0 0 0.65rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.spaceform-page .timeline-panel {
  padding-top: 0.2rem;
}

.spaceform-page .timeline-panel + .timeline-panel {
  margin-top: 1rem;
}

.case-media-hand-01,
.case-media-hand-02 {
  aspect-ratio: 1.12 / 1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 24%),
    radial-gradient(circle at 68% 26%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 18%),
    linear-gradient(135deg, #20242c 0%, #15171d 34%, #6c737f 66%, #d6e0ef 100%);
}

.case-media-hand-02 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 24%),
    radial-gradient(circle at 62% 30%, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0) 18%),
    linear-gradient(135deg, #272b33 0%, #171a20 36%, #747c88 66%, #dce6f6 100%);
}

html[data-theme="dark"] .case-media-01 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 24%),
    linear-gradient(180deg, #3e4550, #292f36);
}

html[data-theme="dark"] .case-media-02 {
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.06), transparent 24%),
    linear-gradient(180deg, #3f3a43, #2a272d);
}

html[data-theme="dark"] .case-media-03 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 24%),
    linear-gradient(180deg, #3b3935, #282624);
}

html[data-theme="dark"] .case-media-04 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 24%),
    linear-gradient(180deg, #413d46, #2b2830);
}

html[data-theme="dark"] .case-media-watch {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 22%),
    radial-gradient(circle at 72% 32%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 18%),
    linear-gradient(135deg, #181a1f 0%, #0f1115 28%, #2a3440 72%, #5f7898 100%);
}

html[data-theme="dark"] .pillar-icon {
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 30%),
    linear-gradient(180deg, #3d4e66, #223142);
}

html[data-theme="dark"] .gesture-figure,
html[data-theme="dark"] .prototype-disc,
html[data-theme="dark"] .prototype-disc-alt {
  box-shadow: none;
}

html[data-theme="dark"] .case-media-hand-01,
html[data-theme="dark"] .case-media-hand-02 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 24%),
    radial-gradient(circle at 68% 26%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 18%),
    linear-gradient(135deg, #1d222a 0%, #12151a 34%, #38404a 66%, #60718a 100%);
}

.case-facts {
  display: grid;
  gap: 1rem;
}

.case-page-cross-device .case-summary-grid {
  align-items: start;
}

.case-page-cross-device .case-body,
.case-page-cross-device .case-facts {
  align-self: start;
}

.case-page-cross-device .case-facts {
  margin-top: 0;
  padding-top: 0;
}

.case-page-cross-device .case-summary .fact-card {
  padding: 0;
}

.about-editorial {
  padding: 3.2rem 0 0;
}

.about-portrait {
  margin: 0;
}

.about-portrait-inline {
  width: min(380px, 100%);
  margin-top: 2rem;
}

.about-portrait-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  filter: grayscale(1);
}

.about-portrait-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 22%),
    linear-gradient(180deg, #c9c7c4, #9f9c98);
}

html[data-theme="dark"] .about-portrait-placeholder {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 22%),
    linear-gradient(180deg, #4a4845, #2a2a2a);
}

.about-portrait figcaption {
  margin-top: 0.65rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.about-editorial-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);
  gap: 2rem;
  align-items: start;
}

.about-column,
.about-aside {
  min-width: 0;
}

.about-label {
  display: inline-block;
  margin: 0 0 1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.about-prose {
  display: grid;
  gap: 1.1rem;
  max-width: 42rem;
  margin-top: 0.2rem;
}

.about-prose p,
.about-meta-item p,
.about-timeline-item p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.72;
}

.about-meta-list {
  display: grid;
  gap: 1.4rem;
}

.about-meta-item {
  padding-top: 0.1rem;
}

.about-meta-item p {
  font-weight: 520;
}

.about-timeline {
  display: grid;
  gap: 1.8rem;
}

.about-timeline-item {
  padding: 0 0 1.2rem;
  border-bottom: 1px solid var(--soft-line);
}

.about-timeline-compact {
  gap: 1rem;
}

.about-timeline-item-compact {
  padding: 0;
  border-bottom: 0;
}

.about-timeline-item-compact h3 {
  margin-bottom: 0.2rem;
}

.about-timeline-item.is-collapsed-item {
  display: none;
}

.about-timeline.is-expanded .about-timeline-item.is-collapsed-item {
  display: block;
}

.about-timeline-item h3 {
  margin: 0 0 0.35rem;
  font-family: "Mona Sans", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}

.about-toggle {
  margin-top: 1.4rem;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: 1px solid var(--soft-line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 180ms ease, transform 180ms ease;
}

.about-patent-list {
  margin: 0.9rem 0 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.55rem;
}

.about-awards {
  max-width: 54rem;
  padding-top: 0.45rem;
}

.about-awards-intro {
  margin: 0 0 1rem;
  font-size: 0.98rem;
  line-height: 1.7;
}

.about-award-list {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.55rem;
}

.about-award-list li {
  font-size: 0.96rem;
  line-height: 1.6;
}

.about-patent-list li {
  font-size: 0.96rem;
  line-height: 1.6;
}

.about-toggle:hover,
.about-toggle:focus-visible {
  color: var(--text);
}

.about-toggle[aria-expanded="true"] {
  transform: rotate(180deg);
}

.category-page .site-shell {
  padding-bottom: 4rem;
}

.category-hero {
  padding: 4.7rem 0 1.8rem;
}

.category-kicker {
  margin: 0 0 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.category-title {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(3rem, 8vw, 6.6rem);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 0.88;
}

.category-title em {
  font-style: italic;
  font-weight: 400;
}

.category-subline {
  margin: 1.65rem 0 0;
  max-width: 72rem;
  font-size: 1.08rem;
  line-height: 1.55;
}

.category-rule {
  width: 100%;
  height: 1px;
  margin-top: 2rem;
  background: var(--line);
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
  align-items: start;
}

.category-card {
  display: block;
}

.category-card--disabled {
  cursor: default;
}

.category-card--locked {
  position: relative;
}

.category-card--lock-label {
  position: relative;
}

.category-media {
  aspect-ratio: 0.9 / 1.15;
  margin-bottom: 0.9rem;
  background-size: cover;
  background-position: center;
}

.category-card--locked .category-media {
  position: relative;
  overflow: hidden;
  filter: none;
  transform: none;
}

.category-card--locked .category-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--platinum) 86%, transparent);
  pointer-events: none;
}

.category-card--locked-clear .category-media::before {
  display: none;
}

.category-card-badge,
.category-lock-badge {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid color-mix(in srgb, var(--line) 26%, transparent);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1;
  pointer-events: none;
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}

.category-card-badge + .category-card-badge {
  left: 2.75rem;
}

.category-media-aimt-embed {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--soft-line) 58%, transparent);
  background: #f2f3f5;
  perspective: 1200px;
}

.category-media-smartworkspace-embed {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--soft-line) 58%, transparent);
  background: #ececeb;
}

.category-media-passthrough-embed {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--soft-line) 58%, transparent);
  background: #f2f1ee;
}

.category-media-embed-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: none;
}

.category-media-embed-frame--angled {
  transform: translate(-6%, -3%) scale(0.82) rotateY(-14deg) rotateX(6deg);
  transform-origin: 58% 52%;
  will-change: transform;
}

.category-media-embed-frame--passthrough {
  transform: translateY(0.5%) scale(1.04);
  transform-origin: 50% 50%;
}

.category-meta {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.category-card h2 {
  margin: 0;
  font-family: "Mona Sans", sans-serif;
  font-size: 1.05rem;
  font-weight: 580;
  line-height: 1.45;
}

.category-media-system-01 {
  background: url("./System/InputFluency/input-thumbnail.png");
  background-position: center center;
  background-size: cover;
}

.category-media-system-02 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)),
    url("./Interfaces/SpaceForm/SpaceForm-thumbnail copy.png");
  background-position: center center;
  background-size: cover;
}

.category-media-system-03 {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 14%, transparent 14% 100%),
    linear-gradient(180deg, #cad9e7, #9eb4ca 46%, #6b88a6 100%);
}

.category-media-system-04 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02)),
    url("./System/DistributedApp/image001.png");
  background-position: center center;
  background-size: cover;
}

.category-card--locked .category-media-system-01::after,
.category-card--locked .category-media-system-04::after {
  content: "";
  position: absolute;
  inset: 10px;
  background: inherit;
  background-position: inherit;
  background-size: inherit;
  filter: blur(6px) saturate(0.86);
  transform: scale(1.06);
  transform-origin: center;
  pointer-events: none;
  z-index: 0;
}

.category-media-system-05 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02)),
    url("./System/SmartWorkspaceSetup/smartworkspace-thumbnail.png");
  background-position: center center;
  background-size: cover;
  filter: brightness(2);
}

.category-media-system-06 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.1)),
    url("./System/WidgetInXR/Widget-thumbnail3.png");
  background-position: center center;
  background-size: cover;
}

.category-media-interaction-01 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03)),
    url("./System/ContextAwareGesture/input-thumbnail.png");
  background-position: center center;
  background-size: cover;
  filter: hue-rotate(350deg) saturate(1.4);
  border: 0.5px solid #00008b;
}

.category-media-interaction-02 {
  background: url("./Interfaces/2-3DWidgetTransform/3dthumbnail.png");
  background-position: center center;
  background-size: cover;
  filter: hue-rotate(200deg) saturate(1.4) brightness(0.9);
}

.category-media-interaction-03 {
  background:
    url("./Interfaces/EmotiBit/EmotiBit-thumbnail.avif");
  background-position: center center;
  background-size: cover;
}

.category-media-interaction-04 {
  background:
    url("./Interfaces/PassthroughUX/passthroughthumbnail.png");
  background-position: center center;
  background-size: cover;
  filter: brightness(1.25);
}

.category-media-environment-01 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)),
    url("./Environments/frost-thumb.png");
  background-size: cover;
  background-position: 50% 50%;
}

.category-media-environment-02 {
  background: url("https://images.squarespace-cdn.com/content/v1/601cc68f1a355a7eb34234bf/1619977813580-8IZ4KCWBF9ST0HJ8AKRN/_Architecture_-+Photo+credits_+Andy+Fritsch+2.JPG");
  background-size: cover;
  background-position: center center;
}

.category-media-environment-03 {
  background: url("https://images.squarespace-cdn.com/content/v1/601cc68f1a355a7eb34234bf/1619871017702-VUCWOHZGVCBBBVE6275E/ezgif.com-gif-maker+%2877%29.gif");
  background-size: cover;
  background-position: center center;
}

.category-media-environment-04 {
  background: url("https://images.squarespace-cdn.com/content/v1/601cc68f1a355a7eb34234bf/1620048157192-1072Y1YO0HWSHCA37DR9/ezgif.com-gif-maker+%2878%29.gif");
  background-size: cover;
  background-position: center center;
}

.category-media-environment-05 {
  background: url("./Environments/thumbnails.png");
  background-size: cover;
  background-position: center center;
}

.category-media-environment-06 {
  background: url("./Environments/Empire-State-80th-floor.png");
  background-size: cover;
  background-position: center center;
}

.category-media-environment-07 {
  background: url("./Environments/EconoMe/oman.png");
  background-size: cover;
  background-position: center center;
  background-color: #d1d1d1;
}

.category-media-lab-01 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 20%),
    linear-gradient(180deg, #09284c, #153a68 40%, #98c2ee 100%);
}

.category-media-lab-02 {
  background:
    radial-gradient(circle at 24% 50%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 12%),
    repeating-linear-gradient(90deg, #111722 0 12px, #f4f5f4 12px 26px);
}

.category-media-lab-03 {
  background:
    radial-gradient(circle at 50% 50%, rgba(205, 255, 83, 0.74) 0 1px, transparent 2px),
    linear-gradient(180deg, #11131a, #1b2432);
  background-size: 18px 18px, cover;
}

.category-media-motion-01 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 20%),
    linear-gradient(135deg, #20152a, #5f3aa0 48%, #e4b8ff 100%);
}

.category-media-motion-02 {
  background:
    radial-gradient(circle at 62% 34%, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0) 16%),
    linear-gradient(135deg, #112030 0%, #3d7ec9 56%, #c8e9ff 100%);
}

.category-media-motion-03 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 20%),
    linear-gradient(180deg, #0f1723, #1e314f 54%, #7ec0ff 100%);
}

.press-list {
  display: grid;
  gap: 0.3rem;
}

.press-row {
  display: grid;
  grid-template-columns: minmax(140px, 0.34fr) minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(127, 136, 152, 0.14);
}

.press-source,
.press-year {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.press-title {
  font-family: "Mona Sans", sans-serif;
  font-size: 1rem;
  font-weight: 560;
  line-height: 1.5;
}

html[data-theme="dark"] .category-media-system-01,
html[data-theme="dark"] .category-media-system-02,
html[data-theme="dark"] .category-media-system-03,
html[data-theme="dark"] .category-media-system-04,
html[data-theme="dark"] .category-media-system-05,
html[data-theme="dark"] .category-media-system-06,
html[data-theme="dark"] .category-media-interaction-01,
html[data-theme="dark"] .category-media-interaction-02,
html[data-theme="dark"] .category-media-interaction-03,
html[data-theme="dark"] .category-media-interaction-04,
html[data-theme="dark"] .category-media-environment-01,
html[data-theme="dark"] .category-media-environment-02,
html[data-theme="dark"] .category-media-environment-03,
html[data-theme="dark"] .category-media-environment-04,
html[data-theme="dark"] .category-media-environment-05,
html[data-theme="dark"] .category-media-environment-06,
html[data-theme="dark"] .category-media-environment-07,
html[data-theme="dark"] .category-media-lab-01,
html[data-theme="dark"] .category-media-lab-02,
html[data-theme="dark"] .category-media-lab-03,
html[data-theme="dark"] .category-media-motion-01,
html[data-theme="dark"] .category-media-motion-02,
html[data-theme="dark"] .category-media-motion-03 {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] .category-media-aimt-embed {
  background: #09090b;
}

html[data-theme="dark"] .category-media-smartworkspace-embed {
  background: #0f1012;
}

html[data-theme="dark"] .category-media-passthrough-embed {
  background: #0f1219;
}

html[data-theme="dark"] .category-card--locked .category-media {
  filter: none;
}

html[data-theme="dark"] .category-card--locked .category-media::before {
  background: color-mix(in srgb, var(--onyx) 80%, transparent);
}

html[data-theme="dark"] .category-card--locked-clear .category-media::before {
  display: none;
}

.next-card {
  display: block;
  padding: 1.6rem;
}

.next-card .eyebrow {
  margin-bottom: 0.7rem;
}

.next-title {
  font-size: 1.35rem;
  line-height: 1.35;
}

.next-link {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.next-card--disabled {
  cursor: default;
}

.next-card--disabled .next-link {
  border-bottom: 1px dashed currentColor;
  pointer-events: none;
}

.case-page-cross-device .fact-card,
.case-page-cross-device .detail-card,
.case-page-cross-device .pillar-card,
.case-page-cross-device .timeline-panel {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.section-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.5rem 0;
}

.case-page-cross-device .case-hero {
  padding: 4.4rem 0 1.5rem;
}

.case-page-cross-device .case-intro + .case-intro {
  margin-top: 0.7rem;
}

.case-page-cross-device .case-summary,
.case-page-cross-device .case-details,
.case-page-cross-device .case-system-section,
.case-page-cross-device .case-research-section,
.case-page-cross-device .case-prototype-section,
.case-page-cross-device .case-next {
  padding-top: 3rem;
}

.case-page-cross-device .section + .section {
  margin-top: 0.9rem;
}

.distributed-hero-media,
.distributed-figure-wide {
  margin: 1.7rem 0 0;
}

.case-page-cross-device .case-prototype-section .distributed-figure-wide {
  margin-bottom: 1.4rem;
}

.distributed-hero-media {
  width: min(1080px, 100%);
}

.distributed-two-up,
.distributed-scenario-grid {
  display: grid;
  gap: 1.5rem;
}

.distributed-two-up {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1.4rem;
}

.distributed-two-up .distributed-figure-wide {
  margin: 0;
}

.case-page-cross-device:not(.passthrough-ux-page) .distributed-two-up .distributed-figure-wide {
  width: 100%;
}

.case-page-cross-device:not(.passthrough-ux-page) .distributed-two-up .case-inline-image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: center;
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
}

.emotibit-page .case-summary,
.emotibit-page .case-details,
.emotibit-page .case-system-section,
.emotibit-page .case-research-section,
.emotibit-page .case-next {
  padding-top: 3.4rem;
}

.emotibit-page,
.emotibit-page .site-shell,
.emotibit-page main {
  overflow-x: clip;
}

.oman-page,
.oman-page .site-shell,
.oman-page main {
  overflow-x: clip;
  overscroll-behavior-y: none;
}

/* Oman page editorial rhythm aligned to AI-mediated page spacing */
.oman-page .case-hero {
  padding: 4.4rem 0 1.4rem;
}

.oman-page .case-summary,
.oman-page .case-details,
.oman-page .case-system-section,
.oman-page .case-research-section,
.oman-page .case-prototype-section,
.oman-page .case-next {
  padding-top: 3.4rem;
}

.oman-page .case-summary-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.75fr);
  gap: 2.4rem;
  align-items: start;
}

.oman-page .fact-card {
  padding: 0;
}

.oman-page .fact-card strong {
  display: inline;
  font-size: 0.97rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  margin: 0;
}

.oman-page .fact-card p {
  font-size: 0.88rem;
  line-height: 1.65;
  margin-top: 0.35rem;
  color: var(--muted);
}

.oman-page .case-body p,
.oman-page .spaceform-editorial-intro p {
  max-width: none;
}

.oman-page .spaceform-editorial-intro {
  display: grid;
  gap: 0.9rem;
  max-width: min(940px, 100%);
}

.oman-page .spaceform-editorial-intro p,
.oman-page .case-body p {
  font-size: 1rem;
  line-height: 1.72;
  color: color-mix(in srgb, var(--text) 86%, transparent);
}

.oman-page .case-caption {
  font-size: 0.78rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--text) 58%, transparent);
}

.oman-page .section-header {
  margin-bottom: 1.65rem;
}

.oman-page .section-header .section-title {
  letter-spacing: -0.01em;
}

.oman-page .oman-editorial-card-grid {
  gap: 1rem 1.25rem;
}

.oman-page .oman-editorial-card-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.oman-page .input-fluency-flow-card.oman-editorial-card {
  text-align: left;
  display: grid;
  align-content: start;
  gap: 0.9rem;
  min-height: 100%;
  padding: 1.25rem 1.2rem 1.3rem;
  border: 1px solid color-mix(in srgb, var(--soft-line) 58%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, transparent), color-mix(in srgb, var(--bg-elevated) 97%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 8px 18px rgba(17, 17, 17, 0.022);
}

.oman-page .input-fluency-flow-card.oman-editorial-card h3,
.oman-page .input-fluency-flow-card.oman-editorial-card p {
  margin: 0;
}

.oman-page .input-fluency-flow-card.oman-editorial-card::before {
  content: attr(data-card-label);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 52%, transparent);
}

.oman-page .input-fluency-flow-card.oman-editorial-card h3 {
  font-family: "Mona Sans", sans-serif;
  font-size: 1.02rem;
  font-weight: 620;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
  color: var(--text);
}

.oman-page .input-fluency-flow-card.oman-editorial-card p {
  max-width: none;
  font-size: 0.95rem;
  line-height: 1.68;
  color: color-mix(in srgb, var(--text) 78%, transparent);
  font-weight: 430;
}

.oman-page .oman-card-design-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
  align-items: start;
}

.oman-page .oman-card-design-grid .distributed-figure-wide {
  margin: 0;
  width: 100%;
  max-width: none;
}

.oman-page .oman-card-design-grid .case-inline-image {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: 6px;
}

.oman-page .oman-attire-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: 1.2rem;
  align-items: start;
}

.oman-page .oman-attire-card {
  text-align: left;
  display: grid;
  align-content: start;
  gap: 0.7rem;
  padding: 1.1rem 1.05rem 1.15rem;
  border: 1px solid color-mix(in srgb, var(--soft-line) 58%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, transparent), color-mix(in srgb, var(--bg-elevated) 97%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 8px 18px rgba(17, 17, 17, 0.022);
}

.oman-page .oman-attire-card h3,
.oman-page .oman-attire-card p {
  margin: 0;
}

.oman-page .oman-attire-card h3 {
  font-family: "Mona Sans", sans-serif;
  font-size: 1.02rem;
  font-weight: 620;
  line-height: 1.4;
  color: var(--text);
}

.oman-page .oman-attire-card p {
  max-width: none;
  font-size: 0.95rem;
  line-height: 1.68;
  color: color-mix(in srgb, var(--text) 78%, transparent);
  font-weight: 430;
}

.oman-page .oman-attire-card .distributed-figure-wide {
  margin-top: 0.4rem;
  width: 100%;
  max-width: none;
}

.oman-page .oman-attire-card .case-inline-image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border-radius: 6px;
}

.oman-page .oman-attire-card .case-inline-image.oman-attire-image--trim-bottom {
  object-position: center 32%;
}

.oman-page .oman-sector-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.2rem;
  margin-bottom: 1.6rem;
  align-items: start;
}

.oman-page .oman-sector-card {
  text-align: left;
  display: grid;
  align-content: start;
  gap: 0.7rem;
  min-height: 100%;
  padding: 1.1rem 1.05rem 1.15rem;
  border: 1px solid color-mix(in srgb, var(--soft-line) 58%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, transparent), color-mix(in srgb, var(--bg-elevated) 97%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 8px 18px rgba(17, 17, 17, 0.022);
}

.oman-page .oman-sector-card h3,
.oman-page .oman-sector-card p {
  margin: 0;
}

.oman-page .oman-sector-card h3 {
  font-family: "Mona Sans", sans-serif;
  font-size: 1.02rem;
  font-weight: 620;
  line-height: 1.4;
  color: var(--text);
}

.oman-page .oman-sector-card p {
  max-width: none;
  font-size: 0.95rem;
  line-height: 1.68;
  color: color-mix(in srgb, var(--text) 78%, transparent);
  font-weight: 430;
}

.oman-page .oman-building-pairs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
  align-items: stretch;
}

.oman-page .oman-building-pair-card {
  margin: 0;
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.oman-page .oman-building-pair-photo,
.oman-page .oman-building-pair-illustration {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0;
}

.oman-page .oman-building-pair-photo {
  object-fit: cover;
  object-position: center;
}

.oman-page .oman-building-pair-illustration {
  object-fit: cover;
  object-position: center 84%;
}

.oman-page .oman-takeover-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.6rem;
  align-items: stretch;
}

.oman-page .oman-takeover-card {
  margin: 0;
  width: 100%;
  max-width: none;
  display: grid;
  align-content: center;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--soft-line) 58%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, transparent), color-mix(in srgb, var(--bg-elevated) 97%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 8px 18px rgba(17, 17, 17, 0.022);
}

.oman-page .oman-takeover-card[data-gallery-card] {
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.oman-page .oman-takeover-card[data-gallery-card]:hover {
  border-color: color-mix(in srgb, var(--accent-secondary) 26%, var(--soft-line));
}

.oman-page .oman-takeover-card[data-gallery-card]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-secondary) 48%, transparent);
  outline-offset: 2px;
}

.oman-page .oman-takeover-card.is-active-card {
  border-color: color-mix(in srgb, var(--accent-secondary) 40%, var(--soft-line));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 10px 20px rgba(17, 17, 17, 0.03);
}

.oman-page .oman-takeover-card-image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: center;
}

/* Smoother gallery page transitions for Oman case study */
.oman-page .rules-gallery-slide {
  transform: none;
  animation: oman-rules-fade-in 260ms ease forwards;
}

.oman-page .rules-gallery-slide.is-leaving {
  transform: none;
  animation: oman-rules-fade-out 260ms ease forwards;
}

/* Lock takeover gallery frame to prevent subtle layout shift between slides */
.oman-page [data-gallery-id="takeover-maps"] .rules-gallery-carousel {
  aspect-ratio: 16 / 9;
  min-height: 0 !important;
}

.oman-page [data-gallery-id="takeover-maps"] .rules-gallery-slide {
  position: absolute;
  inset: 0;
  height: 100%;
  animation: none;
  transition: opacity 260ms ease;
}

.oman-page [data-gallery-id="takeover-maps"] .rules-gallery-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}

.oman-page [data-gallery-id="takeover-maps"] .rules-gallery-slide:not(.is-active),
.oman-page [data-gallery-id="takeover-maps"] .rules-gallery-slide.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
}

@keyframes oman-rules-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes oman-rules-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.oman-page .oman-attire-reference-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.2rem;
  align-items: stretch;
}

.oman-page .oman-attire-reference-grid .distributed-figure-wide {
  margin: 0;
  width: 100%;
  max-width: none;
}

.oman-page .oman-attire-reference-grid .case-inline-image {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: 6px;
}

.oman-page .oman-profession-triad-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.4rem;
  align-items: stretch;
}

.oman-page .oman-profession-triad-grid .distributed-figure-wide {
  margin: 0;
  width: 100%;
  max-width: none;
}

.oman-page .oman-profession-triad-grid .case-inline-image {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
}

.oman-page .spaceform-impact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.4rem;
  align-items: stretch;
}

.oman-triple-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.oman-page .spaceform-impact-card {
  text-align: left;
  display: grid;
  align-content: start;
  gap: 0.7rem;
  min-height: 100%;
  padding: 1.1rem 1.05rem 1.15rem;
  border: 1px solid color-mix(in srgb, var(--soft-line) 58%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, transparent), color-mix(in srgb, var(--bg-elevated) 97%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 8px 18px rgba(17, 17, 17, 0.022);
}

.oman-page .spaceform-impact-card p {
  margin: 0;
  max-width: none;
}

@media (max-width: 980px) {
  .oman-page .oman-card-design-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .oman-page .oman-attire-card-grid {
    grid-template-columns: 1fr;
  }

  .oman-page .oman-sector-card-grid {
    grid-template-columns: 1fr;
  }

  .oman-page .oman-building-pairs-grid {
    grid-template-columns: 1fr;
  }

  .oman-page .oman-takeover-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .oman-page .oman-attire-reference-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .oman-page .oman-profession-triad-grid {
    grid-template-columns: 1fr;
  }

  .oman-page .spaceform-impact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .oman-page .oman-card-design-grid {
    grid-template-columns: 1fr;
  }

  .oman-page .oman-attire-reference-grid {
    grid-template-columns: 1fr;
  }

  .oman-page .oman-takeover-card-grid {
    grid-template-columns: 1fr;
  }
}

.emotibit-page .case-hero {
  padding: 4.4rem 0 1.4rem;
}

.emotibit-page .section-header {
  margin-bottom: 1.5rem;
}

.emotibit-page .case-body p,
.emotibit-page .spaceform-editorial-intro p {
  max-width: none;
  font-size: 1rem;
  line-height: 1.72;
}

.emotibit-page .spaceform-editorial-intro {
  display: grid;
  gap: 1rem;
}

.emotibit-page .emotibit-press-caption {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  line-height: 1.6;
  opacity: 0.75;
  font-weight: 600;
}

.emotibit-page .emotibit-video-caption {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  font-style: italic;
  line-height: 1.6;
  color: color-mix(in srgb, var(--text) 76%, transparent);
}

.emotibit-page .case-video,
.emotibit-page .distributed-hero-media,
.emotibit-page .distributed-figure-wide {
  width: min(1120px, 100%);
}

.emotibit-page .distributed-two-up + .distributed-two-up,
.emotibit-page .distributed-two-up + .distributed-figure-wide,
.emotibit-page .distributed-figure-wide + .distributed-two-up {
  margin-top: 1.5rem;
}

.emotibit-page .case-summary-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.75fr);
  gap: 2.4rem;
  align-items: start;
}

.emotibit-page .case-facts {
  display: grid;
  gap: 1.45rem;
  align-content: start;
}

.emotibit-page .fact-card {
  padding: 0;
}

.emotibit-page .fact-card p {
  font-size: 0.88rem;
  line-height: 1.65;
  margin-top: 0.35rem;
  color: var(--muted);
}

.emotibit-page .fact-card strong {
  display: block;
  font-size: 0.97rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  margin-top: 0.2rem;
}

.emotibit-page .fact-card a {
  width: fit-content;
  margin-top: 0.2rem;
  font-size: 0.88rem;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.emotibit-page .emotibit-research-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: 1.35rem;
}

.emotibit-page .emotibit-research-card {
  gap: 0.72rem;
}

.emotibit-page .emotibit-research-figure {
  margin: 0.2rem 0 0;
}

.emotibit-page .emotibit-research-card .case-inline-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  object-position: center;
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
}

.emotibit-page .emotibit-icons-figure {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}

.emotibit-page .emotibit-icon-triplet {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  align-items: start;
}

.emotibit-page .emotibit-icon-slice {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: 999px;
}

.emotibit-page .emotibit-icon-slice-1 {
  object-position: left center;
}

.emotibit-page .emotibit-icon-slice-2 {
  object-position: center;
}

.emotibit-page .emotibit-icon-slice-3 {
  object-position: right center;
}

.emotibit-page .emotibit-ia-subsections {
  display: grid;
  gap: 1.35rem;
  margin-top: 1.35rem;
}

.emotibit-page .emotibit-ia-subsection {
  display: grid;
  gap: 0.55rem;
}

.emotibit-page .emotibit-ia-subsection + .emotibit-ia-subsection {
  padding-top: 1.15rem;
  border-top: 1px solid color-mix(in srgb, var(--soft-line) 56%, transparent);
}

.emotibit-page .emotibit-ia-subsection .rules-card-label {
  margin: 0;
}

.emotibit-page .emotibit-ia-subsection .rules-card-title {
  margin: 0;
}

.emotibit-page .emotibit-ia-subsection p {
  margin: 0;
  max-width: none;
  font-size: 1rem;
  line-height: 1.72;
}

.emotibit-page .emotibit-ia-subsection .spaceform-bullet-list {
  margin: 0.25rem 0 0.4rem;
}

.emotibit-page .emotibit-ia-card-grid {
  margin-top: 1.35rem;
}

@media (min-width: 981px) {
  .case-page-cross-device.emotibit-page .rules-card-grid.emotibit-ia-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .case-page-cross-device.emotibit-page .rules-card-grid.emotibit-flow-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-page-cross-device.emotibit-page .rules-card-grid.emotibit-kdd-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .emotibit-page .emotibit-icons-figure {
    grid-template-columns: 1fr;
  }

  .emotibit-page .emotibit-before-after-grid {
    grid-template-columns: 1fr;
  }
}

.emotibit-page .emotibit-ia-gallery-shell {
  margin-top: 1.05rem;
}

.emotibit-page .emotibit-ia-gallery-shell .rules-gallery-slide > .case-inline-image {
  aspect-ratio: 16 / 9;
}

.emotibit-page figure:not([class]) {
  margin: 0;
  min-width: 0;
}

.emotibit-page .emotibit-before-after-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  width: 100%;
}

.emotibit-page .emotibit-before-after-grid .case-inline-image {
  width: 100%;
  height: auto;
}

.distributed-card,
.distributed-scenario-card {
  display: grid;
  gap: 1rem;
}

.distributed-card h3,
.distributed-scenario-card h3 {
  margin: 0;
  font-family: "Mona Sans", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.distributed-card p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.8;
}

.case-page-cross-device .case-details .section-header + .spaceform-editorial-intro {
  margin-top: 0.15rem;
}

.case-page-cross-device .case-details .spaceform-editorial-intro + .section-header {
  margin-top: 1.8rem;
}

.case-page-cross-device .spaceform-bullet-list {
  gap: 0.28rem;
  margin: 0.55rem 0 0.7rem;
}

.case-page-cross-device .spaceform-bullet-list p {
  line-height: 1.5;
  padding-left: 1rem;
}

.distributed-scenario-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.distributed-scenario-card .prototype-media-card {
  margin: 0;
}

.distributed-scenario-card .spaceform-editorial-intro {
  max-width: none;
}

.smartworkspace-page main {
  overflow-x: clip;
}

.smartworkspace-four-up {
  display: grid;
  gap: 0.8rem;
  margin-top: 1.6rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.smartworkspace-eight-up {
  display: grid;
  gap: 0.8rem;
  margin-top: 2.4rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.smartworkspace-page .case-hero {
  padding: 4.4rem 0 1.4rem;
}

.smartworkspace-page .case-summary,
.smartworkspace-page .case-details,
.smartworkspace-page .case-system-section,
.smartworkspace-page .case-research-section,
.smartworkspace-page .case-prototype-section,
.smartworkspace-page .case-next {
  padding-top: 3.4rem;
}

.smartworkspace-page .detail-grid,
.smartworkspace-page .case-research-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.8rem;
}

.smartworkspace-page .case-summary-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.75fr);
  gap: 2.4rem;
  align-items: start;
}

.smartworkspace-page .fact-card p {
  font-size: 0.88rem;
  line-height: 1.65;
  margin-top: 0.35rem;
  color: var(--muted);
}

.smartworkspace-page .fact-card strong {
  display: inline;
  font-size: 0.97rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  margin: 0;
}

.smartworkspace-page .case-body p,
.smartworkspace-page .detail-card p,
.smartworkspace-page .spaceform-editorial-intro p {
  max-width: none;
}

.smartworkspace-page .fact-card {
  padding: 0;
}

.smartworkspace-page .section-header {
  margin-bottom: 1.5rem;
}

.case-page-cross-device .outcome-signal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: 2.7rem;
}

.case-page-cross-device .outcome-signal-card {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  min-height: 100%;
  padding: 1.25rem 1.2rem 1.3rem;
  border: 1px solid color-mix(in srgb, var(--soft-line) 58%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, transparent), color-mix(in srgb, var(--bg-elevated) 97%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 8px 18px rgba(17, 17, 17, 0.022);
}

.case-page-cross-device .outcome-signal-label {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 52%, transparent);
}

.case-page-cross-device .outcome-signal-title {
  margin: 0;
  font-family: "Mona Sans", sans-serif;
  font-size: 1.02rem;
  font-weight: 620;
  line-height: 1.4;
}

.case-page-cross-device .outcome-signal-card p {
  margin: 0;
  max-width: none;
}

.case-page-cross-device .outcome-signal-card .outcome-signal-title + p {
  font-size: 0.95rem;
  line-height: 1.68;
}

.case-page-cross-device .outcome-signal-card .outcome-signal-title + p + p {
  font-size: 0.9rem;
  line-height: 1.62;
  color: color-mix(in srgb, var(--text) 78%, transparent);
}

.case-page-cross-device .aimt-card-grid {
  display: grid;
  gap: 1.1rem;
  margin-top: 2.4rem;
}

.case-page-cross-device .aimt-card-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.case-page-cross-device .aimt-card-grid--taxonomy {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem 1.25rem;
}


.case-page-cross-device .fact-card.aimt-info-card {
  text-align: left;
  display: grid;
  align-content: start;
  gap: 0.75rem;
  min-height: 100%;
  padding: 1.25rem 1.2rem 1.3rem;
  border: 1px solid color-mix(in srgb, var(--soft-line) 58%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, transparent), color-mix(in srgb, var(--bg-elevated) 97%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 8px 18px rgba(17, 17, 17, 0.022);
}

.case-page-cross-device .fact-card.aimt-info-card span,
.case-page-cross-device .fact-card.aimt-info-card h3,
.case-page-cross-device .fact-card.aimt-info-card p {
  margin: 0;
}

.case-page-cross-device .aimt-info-card-head {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.case-page-cross-device .fact-card.aimt-info-card--inline-head {
  gap: 0.95rem;
}

.case-page-cross-device .aimt-card-grid--taxonomy .aimt-info-card-head {
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-secondary) 18%, var(--soft-line));
}

.case-page-cross-device .aimt-card-grid--taxonomy .aimt-info-card-head > span {
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--text) 94%, transparent);
}

.case-page-cross-device .aimt-info-card-title-inline {
  margin: 0;
  font-family: "Mona Sans", sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
  color: color-mix(in srgb, var(--text) 94%, transparent);
}

.case-page-cross-device .rules-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: 2.7rem;
}

.case-page-cross-device .mapping-rules-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}


.case-page-cross-device .rules-card {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  min-height: 100%;
  padding: 1.25rem 1.2rem 1.3rem;
  border: 1px solid color-mix(in srgb, var(--soft-line) 58%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, transparent), color-mix(in srgb, var(--bg-elevated) 97%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 8px 18px rgba(17, 17, 17, 0.022);
}

.case-page-cross-device .rules-card[data-gallery-card] {
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.case-page-cross-device .rules-card[data-gallery-card]:hover {
  border-color: color-mix(in srgb, var(--accent-secondary) 26%, var(--soft-line));
}

.case-page-cross-device .rules-card[data-gallery-card]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-secondary) 48%, transparent);
  outline-offset: 2px;
}

.case-page-cross-device .rules-card.is-active-card {
  border-color: color-mix(in srgb, var(--accent-secondary) 40%, var(--soft-line));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 10px 20px rgba(17, 17, 17, 0.03);
}

.case-page-cross-device .rules-card-label {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 52%, transparent);
}

.case-page-cross-device .rules-card-title {
  margin: 0;
  font-family: "Mona Sans", sans-serif;
  font-size: 1.02rem;
  font-weight: 620;
  line-height: 1.4;
}

.case-page-cross-device .rules-card p {
  margin: 0;
  max-width: none;
}

.case-page-cross-device .rules-card .rules-card-title + p {
  font-size: 0.95rem;
  line-height: 1.68;
}

.case-page-cross-device .rules-gallery-shell {
  display: flex;
  flex-direction: column;
  margin-top: 1.8rem;
}

.case-page-cross-device .rules-gallery-controls {
  order: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin-top: 0.9rem;
}

.case-page-cross-device .rules-gallery-dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.case-page-cross-device .rules-gallery-nav {
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--soft-line) 62%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg-elevated) 98%, transparent);
  color: var(--text);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  opacity: 0.5;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.case-page-cross-device .rules-gallery-nav:hover {
  opacity: 1;
  border-color: var(--text);
}

.case-page-cross-device .rules-gallery-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: none;
  background: var(--text);
  opacity: 0.2;
  cursor: pointer;
  padding: 0;
  transition: opacity 200ms ease, transform 200ms ease;
}

.case-page-cross-device .rules-gallery-dot.is-active {
  opacity: 0.85;
  transform: scale(1.35);
}

.case-page-cross-device .rules-gallery-carousel {
  order: 1;
  position: relative;
  display: grid;
  width: 100%;
  overflow: hidden;
}

.case-page-cross-device .rules-gallery-slide {
  grid-area: 1 / 1;
  margin: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.55rem;
  padding: 0.8rem;
  border: 1px solid color-mix(in srgb, var(--soft-line) 58%, transparent);
  background: color-mix(in srgb, var(--bg-elevated) 98%, transparent);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(18px);
  will-change: opacity, transform;
  animation: rules-slide-in 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.case-page-cross-device .rules-gallery-slide > .case-inline-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
}

.case-page-cross-device .rules-gallery-rule1-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.case-page-cross-device .rules-gallery-rule1-grid .case-inline-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
}

.case-page-cross-device .rules-gallery-slide figcaption {
  margin: 0;
  align-self: end;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: color-mix(in srgb, var(--text) 64%, transparent);
}

.case-page-cross-device .mapping-media-slide > .case-inline-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
}

.case-page-cross-device .mapping-rule2-grid,
.case-page-cross-device .mapping-rule3-grid {
  display: grid;
  gap: 0.65rem;
}

.case-page-cross-device .mapping-rule2-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.case-page-cross-device .mapping-rule3-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.case-page-cross-device .mapping-rule2-grid .case-inline-image,
.case-page-cross-device .mapping-rule3-grid .case-inline-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
}

.case-page-cross-device .mapping-rule2-grid .mapping-rule2-image-shrink {
  width: 92%;
  justify-self: center;
}

.case-page-cross-device .examples-gallery-content {
  display: grid;
  gap: 1rem;
}

.case-page-cross-device .examples-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: 2.7rem;
}

.case-page-cross-device .examples-gallery-shell {
  margin-top: 1.4rem;
}

.case-page-cross-device .examples-gallery-copy {
  display: grid;
  gap: 0.55rem;
}

.case-page-cross-device .examples-gallery-label {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 52%, transparent);
}

.case-page-cross-device .examples-gallery-title {
  margin: 0;
  font-family: "Mona Sans", sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
}

.case-page-cross-device .examples-gallery-copy p {
  margin: 0;
  max-width: none;
}

.case-page-cross-device .examples-gallery-title + p {
  font-size: 0.96rem;
  line-height: 1.66;
}

.case-page-cross-device .examples-gallery-content .case-inline-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
}

.case-page-cross-device .examples-media-slide {
  grid-template-rows: 1fr;
}

.case-page-cross-device .examples-media-slide .case-inline-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
}

.case-page-cross-device .rules-gallery-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  z-index: 1;
}

.case-page-cross-device .rules-gallery-slide.is-leaving {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  animation: rules-slide-out 220ms cubic-bezier(0.4, 0, 1, 1) forwards;
  position: absolute;
  inset: 0;
  z-index: 2;
}

@keyframes rules-slide-in {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes rules-slide-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-14px);
  }
}

.smartworkspace-flow-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.4rem 2rem;
}

.smartworkspace-perception-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
  margin-top: 1.8rem;
}

.smartworkspace-perception-card {
  display: grid;
  align-content: start;
  gap: 0.9rem;
  min-height: 100%;
  padding: 1.25rem 1.2rem 1.3rem;
  border: 1px solid color-mix(in srgb, var(--soft-line) 58%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, transparent), color-mix(in srgb, var(--bg-elevated) 97%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 8px 18px rgba(17, 17, 17, 0.022);
}

.smartworkspace-perception-head {
  display: grid;
  gap: 0.45rem;
}

.smartworkspace-perception-index {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 52%, transparent);
}

.smartworkspace-perception-title {
  margin: 0;
  font-family: "Mona Sans", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.smartworkspace-perception-content {
  display: grid;
  gap: 0.75rem;
}

.smartworkspace-perception-caption {
  margin: 0;
  font-style: italic;
  font-size: 0.85rem;
  line-height: 1.45;
}

.smartworkspace-control-card-grid {
  margin-top: 2rem;
}

.smartworkspace-control-gallery {
  margin-top: 1.4rem;
}

.case-page-cross-device .smartworkspace-control-slide {
  grid-template-rows: auto;
  align-content: start;
  gap: 1rem;
}

.case-page-cross-device .smartworkspace-control-slide > * {
  align-self: start;
}

.smartworkspace-control-page-head {
  display: grid;
  gap: 0.45rem;
}

.smartworkspace-control-list {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.35rem;
}

.smartworkspace-control-list li {
  font-size: 0.9rem;
  line-height: 1.6;
}

.smartworkspace-control-slide .smartworkspace-diagram-shell {
  margin-top: 0.65rem;
  padding: 1.2rem;
}

.smartworkspace-control-gesture-grid {
  margin-top: 0.4rem;
  gap: 1.4rem;
}

.smartworkspace-control-advanced-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
  margin-top: 1.2rem;
}

.smartworkspace-control-emphasis {
  margin: 0.4rem 0 0;
  padding: 0.2rem 0 0.2rem 0.9rem;
  border-left: 2px solid var(--accent, currentColor);
  font-size: 1.02rem;
  font-style: italic;
  line-height: 1.58;
}

.smartworkspace-understanding-card-grid {
  margin-top: 2rem;
}

.smartworkspace-understanding-gallery {
  margin-top: 1.4rem;
}

.case-page-cross-device .smartworkspace-understanding-slide {
  grid-template-rows: auto;
  align-content: start;
  gap: 1rem;
}

.case-page-cross-device .smartworkspace-understanding-slide > * {
  align-self: start;
}

.smartworkspace-understanding-interaction-grid,
.smartworkspace-understanding-obstacle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  width: min(760px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.smartworkspace-understanding-note {
  margin: 0;
  font-style: italic;
  font-size: 0.82rem;
  text-align: center;
  color: color-mix(in srgb, var(--text) 68%, transparent);
}

.smartworkspace-understanding-evidence-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}

.smartworkspace-understanding-quote {
  margin-top: 1.6rem;
  padding: 1.1rem 1.3rem;
  border-left: 2px solid var(--accent, currentColor);
}

.smartworkspace-understanding-quote p {
  margin: 0;
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.6;
}

.smartworkspace-persistence-card-grid {
  margin-top: 2rem;
}

.smartworkspace-persistence-gallery {
  margin-top: 1.4rem;
}

.case-page-cross-device .smartworkspace-persistence-slide {
  grid-template-rows: auto;
  align-content: start;
  gap: 1rem;
}

.case-page-cross-device .smartworkspace-persistence-slide > * {
  align-self: start;
}

.smartworkspace-persistence-anchor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
}

.smartworkspace-persistence-boundary-grid {
  margin-top: 0.6rem;
}

.smartworkspace-persistence-context-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  align-items: start;
}

.smartworkspace-persistence-context-left {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.smartworkspace-persistence-quote {
  margin-top: 1.6rem;
  padding: 1.1rem 1.3rem;
  border-left: 2px solid var(--accent, currentColor);
}

.smartworkspace-persistence-quote p {
  margin: 0;
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.6;
}

.smartworkspace-split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 2rem;
  align-items: start;
}

.smartworkspace-diagram-shell {
  margin-top: 2.4rem;
  padding: 1.6rem;
  border: 1px solid color-mix(in srgb, var(--soft-line) 55%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 95%, transparent), color-mix(in srgb, var(--bg-elevated) 97%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 8px 18px rgba(17, 17, 17, 0.025);
}

.smartworkspace-diagram-shell-scroll {
  overflow-x: auto;
}

.smartworkspace-phase-track {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
}

.smartworkspace-flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
}

.smartworkspace-flow-arrow svg {
  width: 24px;
  height: 16px;
  overflow: visible;
}

.smartworkspace-flow-arrow path {
  fill: none;
  stroke: color-mix(in srgb, var(--text) 86%, transparent);
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.smartworkspace-tone-card {
  --tone: rgba(17, 17, 17, 0.02);
  --tone-strong: rgba(17, 17, 17, 0.04);
  --tone-rule: rgba(17, 17, 17, 0.14);
  display: grid;
  align-content: start;
  gap: 0.5rem;
  min-height: 11rem;
  padding: 1rem 1rem 1.05rem;
  border: 1px solid color-mix(in srgb, var(--soft-line) 38%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 97%, transparent), color-mix(in srgb, var(--bg) 94%, var(--tone))),
    linear-gradient(135deg, var(--tone) 0%, transparent 60%);
  box-shadow:
    0 4px 10px rgba(17, 17, 17, 0.018),
    inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.smartworkspace-tone-card--green {
  --tone: rgba(76, 142, 108, 0.09);
  --tone-strong: rgba(76, 142, 108, 0.15);
  --tone-rule: rgba(76, 142, 108, 0.28);
}

.smartworkspace-tone-card--blue {
  --tone: rgba(72, 116, 183, 0.09);
  --tone-strong: rgba(72, 116, 183, 0.15);
  --tone-rule: rgba(72, 116, 183, 0.28);
}

.smartworkspace-tone-card--amber {
  --tone: rgba(164, 117, 35, 0.1);
  --tone-strong: rgba(164, 117, 35, 0.16);
  --tone-rule: rgba(164, 117, 35, 0.28);
}

.smartworkspace-tone-card--violet {
  --tone: rgba(104, 91, 193, 0.1);
  --tone-strong: rgba(104, 91, 193, 0.16);
  --tone-rule: rgba(104, 91, 193, 0.28);
}

.smartworkspace-tone-card-number {
  margin: 0;
  font-size: 1.95rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

.smartworkspace-tone-card-label {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.smartworkspace-tone-card-rule {
  height: 1px;
  background: var(--tone-rule);
  margin: 0.15rem 0 0.1rem;
}

.smartworkspace-tone-card-lead {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 620;
  line-height: 1.35;
  text-wrap: balance;
}

.smartworkspace-tone-card-support {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.42;
  color: var(--muted);
  text-wrap: pretty;
}

.smartworkspace-loop {
  margin-top: 1rem;
  margin-bottom: 0.35rem;
}

.smartworkspace-loop-graphic {
  width: 100%;
  height: 3.2rem;
  display: block;
}

.smartworkspace-loop-graphic path {
  fill: none;
  stroke: color-mix(in srgb, var(--text) 84%, transparent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.smartworkspace-loop-label {
  margin: 0;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 42%, transparent);
}

.smartworkspace-handoff {
  display: grid;
  gap: 0.2rem;
}

/* The s-control handoff cards are intentionally concise; avoid inherited tall card height */
.smartworkspace-handoff .smartworkspace-tone-card {
  min-height: auto;
  padding: 0.82rem 0.88rem 0.86rem;
  gap: 0.35rem;
}

.smartworkspace-handoff-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
}

.smartworkspace-handoff-label {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 54%, transparent);
}

.smartworkspace-handoff-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 78%, transparent);
}

.smartworkspace-handoff-bridge-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  margin: 0.1rem 0;
}

.smartworkspace-handoff-bridge {
  display: grid;
  justify-items: center;
  gap: 0.18rem;
}

.smartworkspace-handoff-bridge--1 {
  grid-column: 2;
}

.smartworkspace-handoff-bridge--2 {
  grid-column: 4;
}

.smartworkspace-handoff-bridge--3 {
  grid-column: 6;
}

.smartworkspace-handoff-stem {
  width: 0;
  height: 1.05rem;
  border-left: 1.5px dashed color-mix(in srgb, var(--line) 26%, transparent);
}

.smartworkspace-handoff-badge {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--text) 88%, transparent);
  color: var(--bg);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
}

.smartworkspace-handoff-caption {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.2;
  color: color-mix(in srgb, var(--text) 48%, transparent);
}

.smartworkspace-handoff-empty {
  min-height: 1px;
}

.ai-pipeline-grid {
  display: block;
}

.ai-pipeline-diagram {
  width: 100%;
  margin: 0 auto;
  padding: 1rem;
}

.ai-pipeline-diagram--horizontal {
  overflow-x: auto;
}

.ai-pipeline-horizontal {
  min-width: 980px;
  display: grid;
  grid-template-columns: minmax(210px, 0.95fr) 18px minmax(360px, 1.36fr) 18px minmax(210px, 0.95fr);
  gap: 0.5rem;
  align-items: stretch;
}

.ai-pipeline-horizontal-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
  gap: 0.5rem;
  align-items: stretch;
}

.ai-pipeline-connector {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 16px;
  margin: 0 auto;
  padding: 0;
}

.ai-pipeline-connector svg {
  width: 18px;
  height: 12px;
  overflow: visible;
}

.ai-pipeline-connector path {
  fill: none;
  stroke: color-mix(in srgb, var(--text) 72%, transparent);
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.ai-pipeline-connector--dashed path {
  stroke: color-mix(in srgb, var(--line) 46%, transparent);
  stroke-dasharray: 4 3;
}

.ai-pipeline-automation {
  display: grid;
  gap: 0.45rem;
  padding: 0.55rem;
  border: 1px solid color-mix(in srgb, var(--soft-line) 52%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, transparent), color-mix(in srgb, var(--bg-elevated) 98%, transparent)),
    linear-gradient(135deg, rgba(72, 116, 183, 0.035) 0%, transparent 62%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    0 4px 12px rgba(17, 17, 17, 0.015);
}

.ai-pipeline-automation--horizontal {
  align-self: stretch;
  height: 100%;
}

.ai-pipeline-automation-label {
  margin: 0;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 42%, transparent);
}

.ai-pipeline-note {
  margin: 0.4rem 0 0;
  text-align: center;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 34%, transparent);
}

.ai-pipeline-inline-arrow {
  display: block;
  font-size: 1.35rem;
  font-weight: 300;
  line-height: 1;
  color: color-mix(in srgb, var(--text) 58%, transparent);
  transform: translateY(-0.5px);
}

.ai-pipeline-diagram .smartworkspace-tone-card {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  align-content: start;
  gap: 0.24rem;
  padding: 0.58rem 0.64rem 0.62rem;
  height: 100%;
}

.ai-pipeline-card-head {
  display: flex;
  align-items: baseline;
  gap: 0.42rem;
  min-width: 0;
}

.ai-pipeline-diagram .smartworkspace-tone-card-number {
  flex: 0 0 auto;
  font-size: 0.92rem;
  line-height: 1;
}

.ai-pipeline-diagram .smartworkspace-tone-card-label {
  min-width: 0;
  font-size: 0.5rem;
  line-height: 1.1;
}

.ai-pipeline-diagram .smartworkspace-tone-card-rule {
  margin: 0.02rem 0 0;
}

.ai-pipeline-diagram .smartworkspace-tone-card-lead {
  font-size: 0.69rem;
  line-height: 1.18;
}

.ai-pipeline-diagram .smartworkspace-tone-card-support {
  font-size: 0.64rem;
  line-height: 1.22;
}

.ai-pipeline-horizontal > .smartworkspace-tone-card:first-child,
.ai-pipeline-horizontal > .smartworkspace-tone-card:last-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ai-pipeline-horizontal > .smartworkspace-tone-card:first-child .smartworkspace-tone-card-rule,
.ai-pipeline-horizontal > .smartworkspace-tone-card:last-child .smartworkspace-tone-card-rule {
  margin: 0.08rem 0 0.06rem;
}

.ai-pipeline-immersive {
  display: grid;
  grid-template-columns: minmax(160px, 0.44fr) minmax(0, 1.56fr);
  gap: 1.2rem;
  align-items: start;
  min-height: 124vh;
}

.ai-pipeline-rail {
  position: sticky;
  top: 5.2rem;
  align-self: start;
  display: grid;
  gap: 0.8rem;
  padding: 0.74rem 0.72rem 0.76rem;
  border: 1px solid color-mix(in srgb, var(--soft-line) 55%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 97%, transparent), color-mix(in srgb, var(--bg-elevated) 98%, transparent)),
    linear-gradient(135deg, rgba(76, 142, 108, 0.02) 0%, transparent 62%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 8px 18px rgba(17, 17, 17, 0.022);
}

.ai-pipeline-rail-kicker {
  margin: 0;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 40%, transparent);
}

.ai-pipeline-rail-copy,
.ai-pipeline-story-intro p {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--text) 58%, transparent);
}

.ai-pipeline-rail-stack {
  display: grid;
  gap: 0.32rem;
}

.ai-pipeline-rail-card {
  min-height: 0;
  padding: 0.56rem 0.58rem 0.6rem;
}

.ai-pipeline-rail-card .smartworkspace-tone-card-number {
  font-size: 0.92rem;
}

.ai-pipeline-rail-card .smartworkspace-tone-card-label {
  font-size: 0.49rem;
}

.ai-pipeline-rail-card .smartworkspace-tone-card-lead {
  font-size: 0.62rem;
  line-height: 1.2;
}

.ai-pipeline-rail-card .smartworkspace-tone-card-support {
  font-size: 0.56rem;
  line-height: 1.22;
}

.ai-pipeline-rail-card .pipeline-card-toggle {
  margin-top: 0.5rem;
}

.ai-pipeline-rail-card:hover {
  transform: translateY(-1px);
}

.ai-pipeline-rail-card.is-active {
  border-color: color-mix(in srgb, var(--soft-line) 70%, transparent);
}

.ai-pipeline-rail-connector {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 1rem;
}

.ai-pipeline-rail-connector svg {
  width: 16px;
  height: 20px;
}

.ai-pipeline-rail-connector path {
  fill: none;
  stroke: color-mix(in srgb, var(--text) 54%, transparent);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 3 3;
}

.ai-pipeline-rail-card .pipeline-card-toggle {
  opacity: 0.56;
}

.ai-pipeline-rail-card.is-active .pipeline-card-toggle {
  opacity: 0.92;
}

.ai-pipeline-story {
  position: sticky;
  top: 5.2rem;
  max-width: calc(100vw - 5.1rem);
  max-height: calc(100vh - 10.1rem);
  overflow-y: auto;
  overflow-x: clip;
  padding-right: 0.35rem;
  scrollbar-gutter: stable;
  overscroll-behavior-y: auto;
}

.ai-pipeline-story-intro {
  padding: 0.1rem 0 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--soft-line) 45%, transparent);
  margin-bottom: 0.55rem;
  position: sticky;
  top: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, transparent), color-mix(in srgb, var(--bg) 98%, transparent));
  z-index: 1;
  backdrop-filter: blur(6px);
}

.ai-pipeline-story .pipeline-step-body {
  scroll-margin-top: 1.1rem;
  margin-bottom: 0.8rem;
  padding-right: 0;
}

.ai-pipeline-story .pipeline-step-content {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-top: 0.85rem;
}

.ai-pipeline-story .section-title {
  font-size: clamp(1.2rem, 1.32vw, 1.62rem);
  line-height: 1.12;
}

.ai-pipeline-story .spaceform-editorial-intro p,
.ai-pipeline-story .pipeline-step-content p {
  font-size: 0.82rem;
  line-height: 1.5;
}

.ai-pipeline-story .pipeline-step-content > div,
.ai-pipeline-story .pipeline-step-content > figure {
  margin-top: 0.9rem !important;
}

.ai-pipeline-story .pipeline-step-content > div:first-of-type {
  margin-top: 0.7rem !important;
}

.ai-pipeline-story .case-inline-image {
  width: 80% !important;
  max-width: 100%;
  margin-left: 0;
  margin-right: auto;
}

.ai-pipeline-story .distributed-figure-wide {
  width: 6%;
  margin-top: 0.7rem !important;
  margin-left: 0;
  margin-right: auto;
}

.ai-pipeline-story .pipeline-step-content figure > div {
  gap: 0.6rem !important;
  justify-items: start;
}

.ai-pipeline-story .pipeline-step-content > *,
.ai-pipeline-story .pipeline-step-content [style*="grid"] > *,
.ai-pipeline-story .pipeline-step-content figure {
  min-width: 0;
  max-width: 80%;
}

.ai-pipeline-story .pipeline-step-content img {
  max-width: 80%;
  width: 80% !important;
  height: auto;
}

.ai-pipeline-story .media-caption {
  max-width: 80%;
  margin-left: 0;
  margin-right: auto;
  font-size: 0.7rem;
  line-height: 1.3;
}

.pipeline-step-section--first .pipeline-step-content {
  padding-top: 0.2rem;
}

.pipeline-step-section--first .section-header {
  margin-bottom: 0.3rem;
}

.pipeline-step-section--first .spaceform-editorial-intro {
  margin-top: 0;
}

.pipeline-step-section--first .section-title {
  font-size: clamp(1.24rem, 1.4vw, 1.68rem);
}

.widgetsystem-page .case-hero {
  padding: 4.4rem 0 1.4rem;
}

.widgetsystem-page .case-summary,
.widgetsystem-page .case-details,
.widgetsystem-page .case-system-section,
.widgetsystem-page .case-research-section,
.widgetsystem-page .case-prototype-section,
.widgetsystem-page .case-next {
  padding-top: 3.4rem;
}

.widgetsystem-page .case-summary-grid,
.widgetsystem-page .detail-grid,
.widgetsystem-page .case-research-grid {
  gap: 2.4rem;
}

.widgetsystem-page .section-header {
  margin-bottom: 1.8rem;
}

.widgetsystem-page .fact-card {
  padding: 0;
}

.widgetsystem-page .fact-card p {
  font-size: 0.88rem;
  line-height: 1.65;
  margin-top: 0.35rem;
  color: var(--muted);
}

.widgetsystem-page .fact-card strong {
  display: inline;
  font-size: 0.97rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  margin: 0;
}

.widgetsystem-page .case-body p,
.widgetsystem-page .detail-card p,
.widgetsystem-page .spaceform-editorial-intro p {
  max-width: none;
}

.widgetsystem-page .case-summary-grid {
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.72fr);
  align-items: start;
}

.widgetsystem-page .case-facts {
  display: grid;
  gap: 1.5rem;
  align-content: start;
}

.widgetsystem-page .section + .section {
  margin-top: 1.4rem;
}

.widgetsystem-page .distributed-hero-media,
.widgetsystem-page .distributed-figure-wide {
  margin-top: 1.5rem;
}

.widgetsystem-placeholder {
  min-height: 420px;
  width: 100%;
}

.widgetsystem-page .distributed-two-up {
  align-items: start;
  gap: 2rem;
}

.widgetsystem-page .distributed-two-up + .distributed-two-up,
.widgetsystem-page .widgetsystem-split + .distributed-figure-wide,
.widgetsystem-page .distributed-two-up + .distributed-figure-wide {
  margin-top: 1.4rem;
}

.widgetsystem-page .spaceform-editorial-intro {
  display: grid;
  gap: 0.95rem;
}

.widgetsystem-page .spaceform-editorial-intro h3 {
  margin: 0;
  font-family: "Mona Sans", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.contextual-gesture-page .case-hero {
  padding: 4.6rem 0 1.8rem;
}

.contextual-gesture-page .case-summary,
.contextual-gesture-page .case-details,
.contextual-gesture-page .case-system-section,
.contextual-gesture-page .case-research-section,
.contextual-gesture-page .case-prototype-section,
.contextual-gesture-page .case-next {
  padding-top: 3.45rem;
}

.contextual-gesture-page .section + .section {
  margin-top: 1.3rem;
}

.contextual-gesture-page .case-summary-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.68fr);
  gap: 2.4rem;
  align-items: start;
}

.contextual-gesture-page .case-facts {
  gap: 1.45rem;
}

.contextual-gesture-page .section-header {
  margin-bottom: 1.85rem;
}

.contextual-gesture-page .spaceform-editorial-intro {
  display: grid;
  gap: 1.15rem;
  max-width: none;
}

.contextual-gesture-page .spaceform-editorial-intro p {
  max-width: none;
  font-size: 1.02rem;
  line-height: 1.78;
}

.contextual-gesture-page .distributed-hero-media {
  width: min(1120px, 100%);
  margin-top: 1.9rem;
}

.contextual-gesture-placeholder {
  min-height: 520px;
  width: 100%;
}

html[data-theme="dark"] .category-media-interaction-01 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03)),
    url("./System/ContextAwareGesture/Cotextual-thumbnail.png");
  background-position: center center;
  background-size: cover;
  border: 1px solid #00008b;
}

.contextual-gesture-page .distributed-figure-wide {
  margin-top: 1.9rem;
}

.contextual-gesture-page .distributed-two-up {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem;
  margin-top: 1.45rem;
  align-items: start;
}

.contextual-gesture-page .distributed-two-up + .distributed-two-up,
.contextual-gesture-page .distributed-two-up + .distributed-figure-wide,
.contextual-gesture-page .distributed-figure-wide + .distributed-two-up {
  margin-top: 1.9rem;
}

.contextual-gesture-page .case-details .spaceform-bullet-list {
  gap: 0.38rem;
  margin: 0.8rem 0 0;
}

.contextual-gesture-page .case-details .spaceform-bullet-list p {
  line-height: 1.55;
}

.contextual-gesture-page .case-hero {
  padding: 4.8rem 0 1.8rem;
}

.contextual-gesture-page .case-summary,
.contextual-gesture-page .case-details,
.contextual-gesture-page .case-system-section,
.contextual-gesture-page .case-research-section,
.contextual-gesture-page .case-prototype-section,
.contextual-gesture-page .case-next {
  padding-top: 3.8rem;
}

.contextual-gesture-page .case-summary-grid {
  grid-template-columns: minmax(0, 1.28fr) minmax(280px, 0.72fr);
  gap: 2.8rem;
  align-items: start;
}

.contextual-gesture-page .case-body p {
  max-width: none;
  font-size: 1.02rem;
  line-height: 1.78;
}

.contextual-gesture-page .case-caption {
  max-width: 48rem;
  margin-top: 0.95rem;
}

.contextual-gesture-page .section + .section {
  margin-top: 1.55rem;
}

/* ─── Editorial type scale ─────────────────────────────────────── */

/* Section title */
.contextual-gesture-page .section-title {
  font-size: 15.2px;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

/* Subsection title */
.contextual-gesture-page .case-subsection-title {
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  margin: 0 0 0.75rem;
}

/* Subsection heading block */
.contextual-gesture-page .case-subsection-heading {
  margin-top: 2.6rem;
  margin-bottom: 0;
}

/* Body copy — unified across all prose containers */
.contextual-gesture-page .spaceform-editorial-intro p,
.contextual-gesture-page .case-body p,
.contextual-gesture-page .case-subsection-heading p,
.contextual-gesture-page .spaceform-editorial-intro > p {
  font-size: 0.97rem;
  line-height: 1.78;
  max-width: none;
  margin: 0;
}

/* Paragraph gap inside prose containers */
.contextual-gesture-page .spaceform-editorial-intro {
  display: grid;
  gap: 1rem;
}
.contextual-gesture-page .case-subsection-heading {
  display: grid;
  gap: 0.75rem;
}

/* Caption — unified */
.contextual-gesture-page .case-caption,
.contextual-gesture-page p.page-caption {
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: none;
  margin-top: 0.75rem;
}

/* Strong used as an inline label */
.contextual-gesture-page strong {
  display: block;
  font-family: "Mona Sans", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.4rem 0 0.5rem;
}

/* Quote/reflection paragraph — override scattered inline styles */
.contextual-gesture-page .spaceform-reflection-block p,
.contextual-gesture-page .spaceform-break {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-style: italic;
  line-height: 1.45;
  font-weight: 400;
  padding: 0;
  max-width: 44rem;
}

/* Fact card body paragraphs */
.contextual-gesture-page .fact-card p {
  font-size: 0.88rem;
  line-height: 1.65;
  margin-top: 0.35rem;
  color: var(--muted);
}
.contextual-gesture-page .fact-card strong {
  display: inline;
  font-size: 0.97rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  margin: 0;
}

/* ─── Spacing ───────────────────────────────────────────────────── */

/* Figures */
.contextual-gesture-page .distributed-figure-wide {
  margin-top: 1.75rem;
  margin-bottom: 0;
}
.contextual-gesture-page .distributed-figure-wide + .distributed-figure-wide {
  margin-top: 1.2rem;
}

/* Two-up / four-up grids */
.contextual-gesture-page .distributed-two-up {
  margin-top: 1.75rem;
}

/* Bullet list — remove inline margin */
.contextual-gesture-page .spaceform-bullet-list {
  margin-left: 0;
  padding-left: 1.1rem;
}

/* Hero media — remove inline border hack */
.contextual-gesture-page .distributed-hero-media {
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.contextual-gesture-page .distributed-hero-media img,
.contextual-gesture-page .case-hero .case-inline-image {
  max-height: none !important;
  width: 100% !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}

/* Section-header small top nudge → CSS instead of inline */
.contextual-gesture-page .section-header {
  margin-top: 0;
}

/* Subsection inner padding-top: 0 sections */
.contextual-gesture-page .case-details[style*="padding-top: 0"],
.contextual-gesture-page section[style*="padding-top: 0"] {
  padding-top: 0;
}

/* Images within 4-col ergonomic grid — reset inline hacks */
.contextual-gesture-page .distributed-two-up figure img.case-inline-image {
  max-width: 100%;
  margin: 0;
}

/* Centered image blocks */
.contextual-gesture-page .figure-centered {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Impact grid — 3-col */
.contextual-gesture-page .case-details .spaceform-text-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Slideshow track */
.contextual-gesture-page .slideshow-track {
  max-width: 82%;
  margin: 0 auto;
}

.contextual-gesture-page .case-slideshow--sense .slideshow-track {
  max-width: min(1120px, 100%);
  min-height: clamp(20rem, 36vw, 30rem);
}

.contextual-gesture-page .contextual-gesture-sense-summary-grid {
  margin-top: 1.3rem;
  margin-bottom: 1.1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.95rem;
}

.contextual-gesture-page .contextual-gesture-sense-summary-pill {
  width: 100%;
}

.contextual-gesture-page .contextual-gesture-sense-summary-pill .contextual-gesture-interface-pill-label {
  white-space: nowrap;
  font-size: 0.58rem;
  letter-spacing: 0.17em;
}

.contextual-gesture-page .contextual-gesture-input-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 2.35rem;
  width: 100%;
  padding: 0.38rem 0.92rem;
  border: 1px solid color-mix(in srgb, var(--soft-line) 72%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 97%, transparent);
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.contextual-gesture-page .contextual-gesture-input-pill:hover {
  border-color: color-mix(in srgb, var(--line) 82%, var(--soft-line));
}

.contextual-gesture-page .contextual-gesture-input-pill:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-secondary) 34%, transparent);
  outline-offset: 2px;
}

.contextual-gesture-page .contextual-gesture-input-pill-dot {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 72%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--line) 26%, transparent);
  flex-shrink: 0;
}

.contextual-gesture-page .contextual-gesture-input-pill-label {
  font-size: 0.68rem;
  font-weight: 740;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 90%, transparent);
}

.contextual-gesture-page .contextual-gesture-input-pill.is-active-card {
  border-color: color-mix(in srgb, #6f89c8 54%, var(--soft-line));
  background: color-mix(in srgb, #6f89c8 7%, var(--bg));
  box-shadow: none;
}

.contextual-gesture-page .contextual-gesture-input-pill.is-active-card .contextual-gesture-input-pill-dot {
  background: #5f7fc4;
  box-shadow: 0 0 0 4px color-mix(in srgb, #5f7fc4 18%, transparent);
}

.contextual-gesture-page .contextual-gesture-interface-pill-row {
  margin-top: 1.35rem;
  margin-bottom: 1rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}

.contextual-gesture-page .contextual-gesture-interface-pill {
  min-height: 2.55rem;
  gap: 0.52rem;
  padding: 0.28rem 0.96rem;
  border: 1px solid color-mix(in srgb, #141414 16%, transparent);
  background: transparent;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 46%, transparent);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background-color 180ms ease;
}

.contextual-gesture-page .contextual-gesture-interface-pill:hover {
  border-color: color-mix(in srgb, #141414 28%, transparent);
  background: transparent;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 42%, transparent), 0 0 0 2px color-mix(in srgb, #141414 6%, transparent);
  transform: translateY(-1px);
}

.contextual-gesture-page .contextual-gesture-interface-pill:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, #2055dc 72%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 40%, transparent), 0 0 0 2px color-mix(in srgb, #2055dc 20%, transparent);
}

.contextual-gesture-page .contextual-gesture-interface-pill .contextual-gesture-interface-pill-label {
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  font-weight: 730;
  color: color-mix(in srgb, var(--text) 90%, transparent);
}

.contextual-gesture-page .contextual-gesture-interface-pill .contextual-gesture-interface-pill-dot {
  width: 0.62rem;
  height: 0.62rem;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--line) 15%, transparent);
  background: #141414;
}

.contextual-gesture-page .contextual-gesture-interface-pill.is-active-card {
  border-color: #2055dc;
  background: transparent;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 40%, transparent), 0 0 0 3px color-mix(in srgb, #2055dc 24%, transparent);
  transform: none;
}

.contextual-gesture-page .contextual-gesture-interface-pill.is-active-card .contextual-gesture-interface-pill-dot {
  background: #2055dc;
  box-shadow: 0 0 0 5px color-mix(in srgb, #2055dc 20%, transparent);
}

.contextual-gesture-page .contextual-gesture-detail-gallery .slideshow-track {
  max-width: 100%;
}

.contextual-gesture-page #context-option-gallery.rules-gallery-shell {
  margin-top: 1.4rem;
}

.contextual-gesture-page #context-option-gallery .rules-gallery-carousel {
  overflow: hidden;
}

.contextual-gesture-page #context-option-gallery .rules-gallery-slide {
  display: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.contextual-gesture-page #context-option-gallery .rules-gallery-slide.is-active {
  display: grid;
}

.contextual-gesture-page #context-option-gallery .rules-gallery-slide.is-leaving {
  display: grid;
}

.contextual-gesture-page .contextual-gesture-detail-slide {
  margin: 0;
  padding: 1rem;
  border-radius: 0;
  border: 1px solid color-mix(in srgb, var(--soft-line) 58%, transparent);
  background: color-mix(in srgb, var(--bg-elevated) 98%, transparent);
}

.contextual-gesture-page .contextual-gesture-detail-slide--split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
}

.contextual-gesture-page .contextual-gesture-detail-slide--stacked {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.contextual-gesture-page .contextual-gesture-detail-copy {
  display: grid;
  gap: 0.6rem;
  align-content: start;
}

.contextual-gesture-page .contextual-gesture-detail-title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.28;
}

.contextual-gesture-page .contextual-gesture-detail-copy p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.62;
  color: color-mix(in srgb, var(--text) 84%, transparent);
}

.contextual-gesture-page .contextual-gesture-detail-list {
  margin: 0;
  padding-left: 1rem;
  display: grid;
  gap: 0.34rem;
}

.contextual-gesture-page .contextual-gesture-detail-list li {
  font-size: 0.86rem;
  line-height: 1.52;
  color: color-mix(in srgb, var(--text) 78%, transparent);
}

.contextual-gesture-page .contextual-gesture-detail-media--positioning {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
}

.contextual-gesture-page .contextual-gesture-compact-figure {
  text-align: center;
}

.contextual-gesture-page .contextual-gesture-compact-figure .case-inline-image {
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}

.contextual-gesture-page .contextual-gesture-detail-slide figcaption {
  margin-top: 0.48rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.45;
  color: color-mix(in srgb, var(--text) 64%, transparent);
}

.contextual-gesture-page .contextual-gesture-detail-meeting .case-inline-image {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.contextual-gesture-page .contextual-gesture-moving-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.contextual-gesture-page .contextual-gesture-moving-grid .distributed-figure-wide {
  margin: 0;
  display: grid;
  grid-template-rows: minmax(10.5rem, auto) auto;
  gap: 0.4rem;
  align-content: start;
}

.contextual-gesture-page .contextual-gesture-moving-grid .distributed-figure-wide .case-inline-image {
  width: 100%;
  height: clamp(8.8rem, 12vw, 10.6rem);
  object-fit: contain;
  object-position: top center;
}

.contextual-gesture-page .contextual-gesture-moving-grid .distributed-figure-wide figcaption {
  margin-top: 0;
  min-height: 4.1rem;
}

.contextual-gesture-page .contextual-gesture-moving-grid .distributed-figure-wide figcaption strong {
  display: block;
  margin-bottom: 0.16rem;
  font-size: 0.92em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contextual-gesture-page .contextual-gesture-detail-meeting {
  margin: 0;
}

.contextual-gesture-page .case-slideshow--sense .slideshow-slide {
  margin: 0;
}

.contextual-gesture-page .case-slideshow--sense .slideshow-media-frame {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: clamp(18rem, 32vw, 27rem);
  padding: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--soft-line) 62%, transparent);
  background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
}

.contextual-gesture-page .case-slideshow--sense .slideshow-media-frame .case-inline-image {
  width: 100%;
  height: clamp(16.5rem, 29vw, 25rem);
  object-fit: contain;
  object-position: top center;
}

.contextual-gesture-page .case-slideshow--sense .slideshow-slide figcaption {
  margin-top: 0.62rem;
  min-height: 1.5rem;
  font-size: 0.84rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--text) 72%, transparent);
}

/* Approach section — 3-column grid for 6 cards */
.contextual-gesture-page .case-system-section .spaceform-text-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
}

.contextual-gesture-page .case-system-section .spaceform-text-card {
  padding: 1.4rem 1.5rem 1.5rem;
  border-radius: 6px;
}

.contextual-gesture-page .case-system-section .spaceform-text-card h3 {
  font-size: 0.88rem;
  margin-bottom: 0.6rem;
}

.contextual-gesture-page .case-system-section .spaceform-text-card p {
  font-size: 0.875rem;
  line-height: 1.65;
}

.contextual-gesture-page .contextual-gesture-pipeline-grid {
  --pipeline-gap: 1.1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pipeline-gap);
  max-width: none;
  margin-top: 2rem;
  margin-left: auto;
  margin-right: auto;
}

.contextual-gesture-page .contextual-gesture-pipeline-card {
  min-height: 100%;
  position: relative;
}

.contextual-gesture-page .contextual-gesture-pipeline-card:not(:last-child)::after {
  content: "\2192";
  position: absolute;
  top: 50%;
  right: calc((var(--pipeline-gap) / -2) - 0.72rem);
  transform: translateY(-50%);
  display: block;
  font-size: 1.35rem;
  font-weight: 300;
  line-height: 1;
  color: color-mix(in srgb, var(--text) 58%, transparent);
  pointer-events: none;
  z-index: 2;
}

.contextual-gesture-page .contextual-gesture-pipeline-card--signal {
  border-color: color-mix(in srgb, #141414 16%, transparent);
}

.contextual-gesture-page .contextual-gesture-pipeline-card--ai {
  border-color: color-mix(in srgb, #141414 16%, transparent);
}

.contextual-gesture-page .contextual-gesture-hardware-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 1.6rem;
}

.contextual-gesture-page .contextual-gesture-hardware-card {
  min-height: 100%;
}

.contextual-gesture-page .contextual-gesture-kdd-subsection + .contextual-gesture-kdd-subsection {
  margin-top: 0.95rem;
  padding-top: 0.9rem;
  border-top: 1px solid color-mix(in srgb, var(--soft-line) 72%, transparent);
}

.contextual-gesture-page .contextual-gesture-kdd-section .contextual-gesture-kdd-subsection:first-of-type .case-subsection-heading {
  margin-top: 0.95rem;
}

.contextual-gesture-page .contextual-gesture-kdd-section .contextual-gesture-kdd-subsection .section-header {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0.2rem;
}

.contextual-gesture-page .contextual-gesture-kdd-section .contextual-gesture-kdd-subsection .section-title {
  font-size: 0.88rem;
  font-weight: 650;
  letter-spacing: 0.065em;
  line-height: 1.35;
  color: color-mix(in srgb, var(--text) 82%, transparent);
}

.contextual-gesture-page .contextual-gesture-kdd-subsection {
  border-left: 2px solid color-mix(in srgb, var(--accent-secondary) 44%, var(--line));
  padding-left: 1rem;
}

.contextual-gesture-page .contextual-gesture-kdd-section .contextual-gesture-kdd-subsection .case-subsection-heading {
  margin-top: 0;
}

.contextual-gesture-page .contextual-gesture-kdd-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  padding-right: 0.1rem;
}

.contextual-gesture-page .contextual-gesture-kdd-toggle:focus-visible {
  outline: none;
}

.contextual-gesture-page .contextual-gesture-kdd-toggle .section-title {
  margin: 0;
}

.contextual-gesture-page .contextual-gesture-kdd-toggle::after {
  content: "";
  width: 1.78rem;
  height: 1.78rem;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 50%;
  background:
    linear-gradient(color-mix(in srgb, var(--text) 68%, transparent), color-mix(in srgb, var(--text) 68%, transparent)) center / 0.56rem 1px no-repeat,
    linear-gradient(color-mix(in srgb, var(--text) 68%, transparent), color-mix(in srgb, var(--text) 68%, transparent)) center / 1px 0.56rem no-repeat,
    color-mix(in srgb, var(--bg) 98%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 180ms ease, background-size 180ms ease, background-color 180ms ease;
  flex-shrink: 0;
}

.contextual-gesture-page .contextual-gesture-kdd-toggle[aria-expanded="true"]::after {
  background:
    linear-gradient(color-mix(in srgb, var(--text) 68%, transparent), color-mix(in srgb, var(--text) 68%, transparent)) center / 0.56rem 1px no-repeat,
    linear-gradient(color-mix(in srgb, var(--text) 68%, transparent), color-mix(in srgb, var(--text) 68%, transparent)) center / 0 0 no-repeat,
    color-mix(in srgb, var(--bg) 98%, transparent);
}

.contextual-gesture-page .contextual-gesture-kdd-subsection:hover .contextual-gesture-kdd-toggle::after,
.contextual-gesture-page .contextual-gesture-kdd-subsection:focus-within .contextual-gesture-kdd-toggle::after {
  border-color: color-mix(in srgb, var(--line) 86%, transparent);
  background:
    linear-gradient(color-mix(in srgb, var(--text) 72%, transparent), color-mix(in srgb, var(--text) 72%, transparent)) center / 0.56rem 1px no-repeat,
    linear-gradient(color-mix(in srgb, var(--text) 72%, transparent), color-mix(in srgb, var(--text) 72%, transparent)) center / 1px 0.56rem no-repeat,
    color-mix(in srgb, var(--bg) 98%, transparent);
}

.contextual-gesture-page .contextual-gesture-kdd-subsection:hover,
.contextual-gesture-page .contextual-gesture-kdd-subsection:focus-within {
  border-left-color: #2055dc;
}

.contextual-gesture-page .contextual-gesture-kdd-subsection:hover .contextual-gesture-kdd-toggle[aria-expanded="true"]::after,
.contextual-gesture-page .contextual-gesture-kdd-subsection:focus-within .contextual-gesture-kdd-toggle[aria-expanded="true"]::after {
  background:
    linear-gradient(color-mix(in srgb, var(--text) 72%, transparent), color-mix(in srgb, var(--text) 72%, transparent)) center / 0.56rem 1px no-repeat,
    linear-gradient(color-mix(in srgb, var(--text) 72%, transparent), color-mix(in srgb, var(--text) 72%, transparent)) center / 0 0 no-repeat,
    color-mix(in srgb, var(--bg) 98%, transparent);
}

.contextual-gesture-page .contextual-gesture-kdd-subsection.is-collapsed .case-subsection-heading > p,
.contextual-gesture-page .contextual-gesture-kdd-subsection.is-collapsed > :not(.case-subsection-heading) {
  display: none;
}

.contextual-gesture-page .contextual-gesture-output-grid {
  margin-top: 1.6rem;
}

.contextual-gesture-video-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.contextual-gesture-page .contextual-gesture-output-card {
  min-height: 100%;
}

.contextual-gesture-page .contextual-gesture-output-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.contextual-gesture-page .contextual-gesture-output-card .smartworkspace-perception-content > p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.62;
  color: color-mix(in srgb, var(--text) 84%, transparent);
}

.contextual-gesture-page .contextual-gesture-interface-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.4rem;
}

.contextual-gesture-page .contextual-gesture-interface-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  align-content: start;
  min-height: 100%;
}

.contextual-gesture-page .contextual-gesture-interface-card .interface-expand-btn {
  margin-top: 1rem;
}

.contextual-gesture-page .contextual-gesture-outcome-grid {
  margin-top: 1.4rem;
}

.contextual-gesture-page .contextual-gesture-outcome-card {
  min-height: 100%;
}

.widgetsystem-split {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 2.2rem;
  align-items: start;
}

.smartworkspace-render-grid,
.smartworkspace-scenario-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.smartworkspace-render-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.smartworkspace-scenario-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.smartworkspace-page .distributed-two-up {
  align-items: start;
}

.smartworkspace-page .aimt-text-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
}

.smartworkspace-page .aimt-intro-split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 1.5rem;
  align-items: start;
}

.smartworkspace-page .aimt-image-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

/* ── Step 3 mapping gallery: viewport-fitted frame (spaceform pattern) ── */

/*
 * grid-template-rows: 100% forces the single implicit row to equal the
 * container's explicit height, so all slides stretch to exactly that height
 * instead of auto-sizing to their content.
 */
.smartworkspace-page .aimt-mapping-gallery .rules-gallery-carousel {
  height: min(55vh, 520px);
  grid-template-rows: 100%;
}

/* Slides fill the carousel row; inner grid: image area grows, caption fixed */
.smartworkspace-page .aimt-mapping-gallery .rules-gallery-slide {
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
}

/* Rule 1: single image fills the 1fr row */
.smartworkspace-page .aimt-mapping-gallery .mapping-media-slide > .case-inline-image {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: unset;
  object-fit: contain;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
}

/* Rule 4: center wrapper + image */
.smartworkspace-page .aimt-mapping-gallery .mapping-media-slide > center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
}

.smartworkspace-page .aimt-mapping-gallery .mapping-media-slide > center > .case-inline-image {
  max-width: 80%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
}

/* Rules 2 & 3: sub-grids fill the 1fr row */
.smartworkspace-page .aimt-mapping-gallery .mapping-rule2-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: 100%;
  min-height: 0;
  align-items: stretch;
}

.smartworkspace-page .aimt-mapping-gallery .mapping-rule3-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: 100%;
  min-height: 0;
  align-items: stretch;
}

/* Images inside sub-grids fill their cell */
.smartworkspace-page .aimt-mapping-gallery .mapping-rule2-grid .case-inline-image,
.smartworkspace-page .aimt-mapping-gallery .mapping-rule3-grid .case-inline-image {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: unset;
  object-fit: contain;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
}

/* ── Step 4 rendering gallery: same viewport-fitted approach ── */
.smartworkspace-page .aimt-render-gallery .rules-gallery-carousel {
  height: min(55vh, 520px);
  grid-template-rows: 100%;
}

.smartworkspace-page .aimt-render-gallery .rules-gallery-slide {
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
}

/* Slides 2 & 3: single image fills the 1fr row */
.smartworkspace-page .aimt-render-gallery .rules-gallery-slide > .case-inline-image {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: unset;
  object-fit: contain;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
}

/* Slide 1: rule1-grid fills the 1fr row, images fill their cells */
.smartworkspace-page .aimt-render-gallery .rules-gallery-rule1-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: 100%;
  min-height: 0;
  align-items: stretch;
}

.smartworkspace-page .aimt-render-gallery .rules-gallery-rule1-grid .case-inline-image {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: unset;
  object-fit: contain;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
}

.smartworkspace-pair-divider {
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--soft-line);
}

.case-storyboard-section,
.case-mapping-section {
  padding-top: 1.2rem;
}

/* ── Floating TOC ── */
.toc-float {
  position: fixed;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 80;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
}

.toc-float ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.toc-float li {
  display: flex;
}

.toc-float a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0;
  text-decoration: none;
  cursor: pointer;
}

.toc-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #141414;
  opacity: 0.45;
  transition: opacity 0.2s, background 0.2s, transform 0.2s;
}

.toc-label {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: #141414;
  opacity: 0;
  white-space: nowrap;
  transform: translateX(4px);
  transition: opacity 0.18s, transform 0.18s;
  pointer-events: none;
}

.toc-float a:hover .toc-dot,
.toc-float a.toc-active .toc-dot {
  opacity: 1;
  background: #141414;
  transform: scale(1.4);
}

.toc-float a:hover .toc-label,
.toc-float a.toc-active .toc-label {
  opacity: 0.75;
  transform: translateX(0);
}

.toc-float a.toc-active .toc-label {
  opacity: 1;
  color: #141414;
}

/* Dark mode overrides */
html[data-theme="dark"] .toc-dot {
  background: #C8EF3C;
  opacity: 0.55;
}

html[data-theme="dark"] .toc-float a:hover .toc-dot,
html[data-theme="dark"] .toc-float a.toc-active .toc-dot {
  opacity: 1;
  background: #C8EF3C;
}

html[data-theme="dark"] .toc-label {
  color: #EBEBEB;
}

html[data-theme="dark"] .toc-float a.toc-active .toc-label {
  color: #C8EF3C;
}

@media (max-width: 1100px) {
  .toc-float {
    display: none;
  }
}

.storyboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
}

.storyboard-card,
.mapping-card {
  display: grid;
  gap: 0.9rem;
}

.storyboard-card h3,
.mapping-row strong,
.mapping-head span {
  margin: 0;
  font-family: "Mona Sans", sans-serif;
}

.storyboard-card h3 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.storyboard-card p,
.mapping-row p,
.mapping-caption {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.65;
}

.storyboard-frame {
  aspect-ratio: 1.16 / 1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 24%),
    linear-gradient(135deg, #dfe8f4 0%, #bccbe2 48%, #eef3fb 100%);
}

.storyboard-frame-a {
  background:
    radial-gradient(circle at 68% 34%, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0) 18%),
    linear-gradient(135deg, #dfe8f4 0%, #bccbe2 48%, #eef3fb 100%);
}

.storyboard-frame-b {
  background:
    radial-gradient(circle at 34% 56%, rgba(121, 188, 255, 0.34), rgba(121, 188, 255, 0) 24%),
    linear-gradient(135deg, #d6e0ef 0%, #b4c4df 48%, #edf3fb 100%);
}

.storyboard-frame-c {
  background:
    radial-gradient(circle at 52% 36%, rgba(195, 240, 255, 0.38), rgba(195, 240, 255, 0) 24%),
    linear-gradient(135deg, #e2ebf5 0%, #c7d3e7 48%, #eff5fb 100%);
}

.mapping-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
  gap: 1.5rem;
  align-items: start;
}

.mapping-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--soft-line);
}

.mapping-head span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.mapping-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--soft-line);
}

.mapping-row strong {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.mapping-surface {
  position: relative;
  min-height: 22rem;
  background:
    radial-gradient(circle at 70% 26%, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0) 20%),
    linear-gradient(180deg, #f0f5fb 0%, #e4edf8 100%);
}

.mapping-watch {
  position: absolute;
  left: 10%;
  top: 34%;
  width: 26%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0) 22%),
    linear-gradient(180deg, #2b3138, #11141a);
  box-shadow: 0 10px 22px rgba(16, 22, 34, 0.16);
}

.mapping-lines {
  position: absolute;
  left: 36%;
  right: 28%;
  top: 42%;
  display: grid;
  gap: 1.3rem;
}

.mapping-lines span {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, rgba(90, 171, 255, 0.7), rgba(90, 171, 255, 0.14));
}

.mapping-glasses {
  position: absolute;
  right: 8%;
  top: 28%;
  width: 28%;
  height: 28%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  align-items: center;
}

.mapping-glasses span {
  display: block;
  height: 3.8rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #cfe4fb, #b1cce9);
}

.mapping-caption {
  margin-top: 1rem;
}

.contact-section .footer-note {
  padding: 2rem 0 4rem;
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
  transition: opacity 520ms ease, transform 520ms ease;
  transition-delay: var(--delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

@media (max-width: 980px) {
  .about-grid,
  .about-editorial-grid,
  .case-summary-grid,
  .case-research-grid,
  .mapping-grid,
  .process-grid,
  .image-strip,
  .detail-grid,
  .storyboard-grid,
  .distributed-two-up,
  .distributed-scenario-grid,
  .case-pillars,
  .gesture-grid,
  .category-grid,
  .prototype-media-grid,
  .work-head {
    grid-template-columns: 1fr;
  }

  .work-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .work-number {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .work-name {
    grid-column: 1;
    grid-row: 2;
  }

  .work-type {
    grid-column: 2;
    grid-row: 2;
    text-align: right;
    align-self: start;
    font-size: 10px;
    padding-left: 1rem;
    padding-right: 0.5rem;
  }

  .work-year {
    grid-column: 1;
    grid-row: 3;
    text-align: left;
  }

  .spaceform-story-grid,
  .spaceform-page .detail-grid,
  .spaceform-summary-grid,
  .spaceform-dual-section,
  .spaceform-integration-grid,
  .spaceform-page .spaceform-impact-grid,
  .spaceform-platform-grid,
  .spaceform-split,
  .spaceform-split-media-first,
  .spaceform-principles-grid,
  .spaceform-compare-grid,
  .spaceform-media-pair,
  .spaceform-text-grid,
  .widgetsystem-split,
  .input-fluency-opening-grid,
  .input-fluency-split,
  .input-fluency-intro-split,
  .input-fluency-direction-split,
  .input-fluency-flow-grid,
  .input-fluency-arbitration-grid,
  .input-fluency-system-diagram-grid,
  .input-fluency-problem-grid,
  .input-fluency-media-pair,
  .ai-pipeline-grid,
  .ai-pipeline-immersive,
  .smartworkspace-split,
  .smartworkspace-render-grid,
  .smartworkspace-scenario-grid,
  .smartworkspace-flow-grid,
  .smartworkspace-perception-grid,
  .smartworkspace-control-advanced-grid,
  .smartworkspace-understanding-interaction-grid,
  .smartworkspace-understanding-obstacle-grid,
  .smartworkspace-understanding-evidence-grid,
  .smartworkspace-persistence-anchor-grid,
  .smartworkspace-persistence-context-grid,
  .smartworkspace-persistence-context-left,
  .case-page-cross-device .aimt-card-grid--three,
  .case-page-cross-device .aimt-card-grid--taxonomy,
  .case-page-cross-device .mapping-rules-grid,
  .case-page-cross-device .examples-card-grid,
  .case-page-cross-device .rules-card-grid,
  .case-page-cross-device .outcome-signal-grid,
  .smartworkspace-page .case-summary-grid,
  .smartworkspace-page .aimt-text-pair,
  .smartworkspace-page .aimt-intro-split,
  .smartworkspace-page .aimt-image-pair {
    grid-template-columns: 1fr;
  }

  .spaceform-integration-media {
    height: auto;
  }

  .spaceform-integration-item {
    grid-template-rows: auto auto;
  }

  .spaceform-integration-media .case-inline-image {
    height: auto;
    aspect-ratio: 16 / 10;
  }

  .case-page-cross-device .mapping-rule3-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-page-cross-device .rules-gallery-rule1-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .smartworkspace-four-up,
  .smartworkspace-eight-up {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .category-media-embed-frame--angled {
    transform: translate(-3%, -2%) scale(0.9) rotateY(-9deg) rotateX(3deg);
  }

  .category-media-embed-frame--passthrough {
    transform: translateY(0.5%) scale(1.02);
  }

  .spaceform-compare-card .spaceform-editorial-intro {
    min-height: 0;
  }

  .prototype-panel {
    grid-template-columns: 1fr;
  }

  .input-fluency-system-diagram-grid {
    height: auto;
  }

  .ai-pipeline-immersive {
    min-height: 0;
  }

  .ai-pipeline-rail {
    position: static;
    top: auto;
  }

  .ai-pipeline-story {
    position: static;
    top: auto;
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
  }

  .input-fluency-system-connector {
    min-height: 2.6rem;
    width: 100%;
    height: auto;
    margin-top: 0;
  }

  .input-fluency-system-connector svg {
    display: none;
  }

  .input-fluency-system-connector::before,
  .input-fluency-system-connector::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .input-fluency-system-connector::before {
    top: 0;
    bottom: 14px;
    width: 1.5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--line) 50%, transparent);
  }

  .input-fluency-system-connector::after {
    bottom: 4px;
    width: 12px;
    height: 12px;
    border-right: 1.5px solid color-mix(in srgb, var(--line) 50%, transparent);
    border-bottom: 1.5px solid color-mix(in srgb, var(--line) 50%, transparent);
    transform: translateX(-50%) rotate(45deg);
  }

  .input-fluency-system-card {
    min-height: 0;
  }

  .input-fluency-system-card p {
    max-width: none;
  }

  .input-fluency-system-label {
    width: fit-content;
    min-width: 0;
    justify-content: flex-start;
  }

  .input-fluency-system-panel-interpretation {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }

  .work-head {
    display: none;
  }

  .work-row {
    gap: 0.55rem;
    padding: 1.3rem 0;
  }

  .work-year {
    order: unset;
  }

  .hero-copy {
    width: min(88vw, 760px);
  }

  .shipped-carousel {
    grid-auto-columns: minmax(240px, 72vw);
  }

  .contextual-gesture-page .case-slideshow--sense .slideshow-track {
    max-width: 100%;
    min-height: 0;
  }

  .contextual-gesture-page .case-slideshow--sense .slideshow-media-frame {
    min-height: 0;
    padding: 0.65rem;
  }

  .contextual-gesture-page .case-slideshow--sense .slideshow-media-frame .case-inline-image {
    height: auto;
    max-height: 60vh;
  }

  .contextual-gesture-page .case-slideshow--sense .slideshow-slide figcaption {
    min-height: 0;
  }

  .contextual-gesture-page .contextual-gesture-interface-pill-row {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .contextual-gesture-page .contextual-gesture-detail-slide {
    padding: 1rem;
  }

  .contextual-gesture-page .contextual-gesture-detail-slide--split {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  .contextual-gesture-page .contextual-gesture-detail-media--positioning,
  .contextual-gesture-page .contextual-gesture-moving-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .contextual-gesture-page .contextual-gesture-moving-grid .distributed-figure-wide {
    grid-template-rows: auto auto;
    gap: 0.35rem;
  }

  .contextual-gesture-page .contextual-gesture-moving-grid .distributed-figure-wide .case-inline-image {
    height: auto;
    max-height: 52vw;
  }

  .contextual-gesture-page .contextual-gesture-moving-grid .distributed-figure-wide figcaption {
    min-height: 0;
  }

  .contextual-gesture-page .contextual-gesture-compact-figure .case-inline-image {
    width: min(64vw, 240px);
  }

  .contextual-gesture-page .contextual-gesture-pipeline-card::before,
  .contextual-gesture-page .contextual-gesture-pipeline-card::after {
    display: none;
  }

  /* Collapse all page-level 2-col / multi-col grids that override the base reset */
  .contextual-gesture-page .case-summary-grid,
  .contextual-gesture-page .distributed-two-up {
    grid-template-columns: 1fr;
  }

  .contextual-gesture-page .contextual-gesture-sense-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contextual-gesture-page .contextual-gesture-hardware-grid,
  .contextual-gesture-page .contextual-gesture-interface-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contextual-gesture-video-pair {
    grid-template-columns: 1fr;
  }

  /* emotibit-page: page-level overrides that beat the base 1-class reset */
  .emotibit-page .case-summary-grid,
  .emotibit-page .emotibit-before-after-grid {
    grid-template-columns: 1fr;
  }

  .emotibit-page .emotibit-research-card-grid {
    grid-template-columns: 1fr;
  }

  /* 4-card ia grids: 2×2 on mobile */
  .emotibit-page .emotibit-ia-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* flow/interaction cards: 1 per row on mobile */
  .emotibit-page .emotibit-flow-card-grid {
    grid-template-columns: 1fr;
  }

  /* oman-page: page-level overrides that beat the base 1-class reset */
  .oman-page .case-summary-grid,
  .oman-triple-grid {
    grid-template-columns: 1fr;
  }

  /* Step 3 rule cards: 2×2 on mobile instead of collapsing to 1 column */
  .smartworkspace-page .mapping-rules-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .smartworkspace-page .mapping-rules-grid .rules-card p {
    font-size: 12px;
    line-height: 1.5;
  }

  /* Step 2 taxonomy cards: 4-per-row on mobile, text shrunk to fit */
  .smartworkspace-page .aimt-card-grid--taxonomy {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .smartworkspace-page .aimt-card-grid--taxonomy .aimt-info-card-head span {
    font-size: 9px;
  }

  .smartworkspace-page .aimt-card-grid--taxonomy .aimt-info-card-title-inline {
    font-size: 10px;
    line-height: 1.3;
  }

  .smartworkspace-page .aimt-card-grid--taxonomy .aimt-info-card p {
    font-size: 9px !important;
    line-height: 1.4;
  }

  /* Pipeline overview cards: 2×2 grid on mobile, hide arrow dividers */
  .smartworkspace-page .aimt-pipeline-rail {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem !important;
  }

  .smartworkspace-page .aimt-pipeline-rail > div[aria-hidden] {
    display: none !important;
  }

  .smartworkspace-page .aimt-pipeline-rail .ai-pipeline-rail-card {
    flex: unset !important;
    padding: 0.8rem 0.9rem 1rem !important;
  }

  .smartworkspace-page .aimt-pipeline-rail .smartworkspace-tone-card-number {
    font-size: 0.9rem !important;
  }

  .smartworkspace-page .aimt-pipeline-rail .smartworkspace-tone-card-lead {
    font-size: 0.78rem !important;
  }

  .smartworkspace-page .aimt-pipeline-rail .smartworkspace-tone-card-support {
    font-size: 0.7rem !important;
  }
}

/* Side-by-side image pair that never wraps — images shrink to fit */
.smartworkspace-page .aimt-image-pair--fixed {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.smartworkspace-page .aimt-image-pair--fixed .case-inline-image,
.smartworkspace-page .aimt-image-pair--fixed > div > .case-inline-image {
  width: 100% !important;
  max-height: 50vh;
  height: auto;
  object-fit: contain;
}

@media (max-width: 640px) {
  .case-page-cross-device .mapping-rule2-grid,
  .case-page-cross-device .mapping-rule3-grid {
    grid-template-columns: 1fr;
  }

  .case-page-cross-device .rules-gallery-rule1-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .topbar {
    grid-template-columns: auto auto;
  }

  .site-nav {
    position: absolute;
    top: calc(100% + 8px);
    right: 20px;
    width: min(240px, 100%);
    padding: 1rem;
    flex-direction: column;
    align-items: flex-start;
    border: 1px solid color-mix(in srgb, var(--soft-line) 58%, transparent);
    border-radius: 0;
    background: var(--bg);
    box-shadow: 0 8px 18px rgba(17, 17, 17, 0.08);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .site-nav.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .topbar-actions {
    justify-self: end;
  }

  .archive-nav-track {
    width: 2rem;
    height: 1.2rem;
  }

  .archive-nav-thumb {
    width: 0.76rem;
    height: 0.76rem;
  }

  .archive-nav-toggle.is-active .archive-nav-thumb {
    transform: translateX(0.72rem);
  }

  .menu-toggle {
    display: inline-flex;
    padding: 0.3em 0.65em;
    border-radius: 0;
    transition: background 140ms ease, color 140ms ease;
  }

  .menu-toggle:hover {
    background: color-mix(in srgb, var(--text) 9%, transparent);
    color: var(--text);
  }

  .menu-toggle:active {
    background: color-mix(in srgb, var(--text) 16%, transparent);
  }

  .menu-toggle[aria-expanded="true"] {
    background: var(--text);
    color: var(--bg);
  }
}

@media (max-width: 720px) {
  :root {
    --container: min(100%, calc(100% - 28px));
  }

  .hero {
    padding-top: 3.2rem;
    min-height: unset;
  }

  .hero-media {
    width: 100%;
  }

  .hero-copy {
    width: min(100%, 92vw);
    margin-top: 2.4rem;
  }

  .hero-copy p,
  .case-intro,
  .case-body p,
  .detail-card p,
  .about-copy p {
    font-size: 0.98rem;
  }

  .hero-copy p {
    font-size: clamp(1.15rem, 5.4vw, 1.45rem);
    line-height: 1.32;
  }

  .press-row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .category-title {
    font-size: clamp(2.6rem, 14vw, 4.6rem);
    line-height: 0.92;
  }

  .mapping-row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .case-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .case-media-watch-overlay strong {
    max-width: 14rem;
  }

  .hero-subline {
    font-size: clamp(1.05rem, 4.8vw, 1.28rem);
    line-height: 1.34;
  }

  :root {
    --container: calc(100% - 40px);
  }

  .topbar {
    padding: 14px 20px;
  }

}

/* ── Distributed App Experiences page ─────────────── */

.distributed-app-page .case-summary-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.75fr);
  gap: 2.4rem;
  align-items: start;
}

.distributed-app-page .case-facts {
  display: grid;
  gap: 1.45rem;
  align-content: start;
}

.distributed-app-page .fact-card {
  padding: 0;
}

.distributed-app-page .fact-card p {
  font-size: 0.88rem;
  line-height: 1.65;
  margin-top: 0.35rem;
  color: var(--muted);
}

.distributed-app-page .fact-card strong {
  display: inline;
  font-size: 0.97rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  margin: 0;
}

/* ── Passthrough UX page ───────────────────────────── */

.passthrough-ux-page .case-hero {
  padding: 4.4rem 0 1.4rem;
}

.passthrough-ux-page .case-summary,
.passthrough-ux-page .case-details,
.passthrough-ux-page .case-system-section,
.passthrough-ux-page .case-research-section,
.passthrough-ux-page .case-prototype-section {
  padding-top: 3.4rem;
}

.passthrough-ux-page .case-summary-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.75fr);
  gap: 2.4rem;
  align-items: start;
}

.passthrough-ux-page .case-body p {
  max-width: none;
  font-size: 1rem;
  line-height: 1.72;
}

.passthrough-ux-page .fact-card {
  padding: 0;
}

.passthrough-ux-page .fact-card p {
  font-size: 0.88rem;
  line-height: 1.65;
  margin-top: 0.35rem;
  color: var(--muted);
}

.passthrough-ux-page .fact-card strong {
  display: inline;
  font-size: 0.97rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  margin: 0;
}

.passthrough-ux-page .section-header {
  margin-bottom: 1.5rem;
}

.passthrough-ux-page .case-caption {
  max-width: 48rem;
  margin-top: 0.95rem;
}

.passthrough-ux-page .spaceform-editorial-intro {
  display: grid;
  gap: 1rem;
  max-width: none;
}

.passthrough-ux-page .spaceform-editorial-intro p {
  max-width: none;
  font-size: 1rem;
  line-height: 1.72;
}

.passthrough-ux-page .detail-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: 1.35rem;
}

.passthrough-ux-page .detail-grid.passthrough-four-up {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.passthrough-ux-page #s-approach .detail-grid.passthrough-feature-reco-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.passthrough-ux-page .detail-card {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  min-height: 100%;
  padding: 1.25rem 1.2rem 1.3rem;
  border: 1px solid color-mix(in srgb, var(--soft-line) 46%, transparent);
  border-radius: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 97%, transparent), color-mix(in srgb, var(--bg-elevated) 98%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 6px 14px rgba(17, 17, 17, 0.016);
}

.passthrough-ux-page .detail-card .detail-label {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  color: color-mix(in srgb, var(--text) 52%, transparent);
}

.passthrough-ux-page .detail-card h3 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 620;
  line-height: 1.4;
}

.passthrough-ux-page .detail-card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.68;
  color: color-mix(in srgb, var(--text) 78%, transparent);
  max-width: none;
}

.passthrough-ux-page .distributed-hero-media {
  width: min(1080px, 100%);
  margin-top: 1.7rem;
}

.passthrough-ux-page .distributed-figure-wide {
  margin-top: 1.7rem;
  max-width: none;
}

.passthrough-ux-page .distributed-figure-wide .case-inline-image {
  border-radius: 6px;
}

.passthrough-ux-page .distributed-two-up {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1.4rem;
  align-items: start;
  max-width: none;
}

.passthrough-ux-page .distributed-two-up .distributed-figure-wide {
  margin: 0;
  max-width: none;
}

.passthrough-ux-page .distributed-two-up .case-inline-image {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center top;
  border-radius: 6px;
}

.passthrough-ux-page .distributed-two-up + .distributed-two-up,
.passthrough-ux-page .distributed-two-up + .distributed-figure-wide,
.passthrough-ux-page .distributed-figure-wide + .distributed-two-up {
  margin-top: 1.5rem;
}

.passthrough-ux-page #s-objects .distributed-two-up .case-inline-image {
  height: 300px;
}

.passthrough-pui-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
  margin-top: 1.7rem;
  max-width: none;
}

.passthrough-pui-grid .distributed-figure-wide {
  margin: 0;
  max-width: none;
}

.passthrough-pui-grid .case-inline-image {
  width: 100%;
  height: 220px;
  object-fit: contain;
  object-position: center;
  border-radius: 6px;
  background: var(--surface);
}

.passthrough-pui-controls-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: 1.1rem;
}

.passthrough-pui-control-card {
  gap: 0.72rem;
}

.passthrough-pui-control-figure {
  margin: 0;
}

.passthrough-pui-control-figure .case-inline-image {
  width: 100%;
  height: 220px;
  object-fit: contain;
  object-position: center;
  border-radius: 6px;
  background: transparent;
}

.case-page-cross-device .rules-card-grid.passthrough-cuj-card-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.95rem;
  margin-top: 1.2rem;
}

.passthrough-cuj-card {
  gap: 0.75rem;
  padding: 1.25rem 1.2rem 1.3rem;
  border: 1px solid color-mix(in srgb, var(--soft-line) 46%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 97%, transparent), color-mix(in srgb, var(--bg-elevated) 98%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 6px 14px rgba(17, 17, 17, 0.016);
}

.passthrough-cuj-card .rules-card-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--text) 52%, transparent);
}

.passthrough-cuj-card .rules-card-title {
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.42;
}

.passthrough-cuj-card p {
  max-width: none;
}

.passthrough-cuj-card .rules-card-title + p {
  font-size: 0.86rem;
  line-height: 1.56;
  color: color-mix(in srgb, var(--text) 84%, transparent);
}

.passthrough-cuj-card[data-gallery-card] {
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease,
    background-color 180ms ease;
}

.passthrough-cuj-card[data-gallery-card]:hover {
  border-color: color-mix(in srgb, var(--accent-secondary) 26%, var(--soft-line));
  transform: translateY(-1px);
}

.passthrough-cuj-card[data-gallery-card]:focus-visible {
  outline: 2px solid color-mix(in srgb, #2055dc 42%, transparent);
  outline-offset: 2px;
}

.passthrough-cuj-card.is-active-card {
  border-color: color-mix(in srgb, var(--accent-secondary) 40%, var(--soft-line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 97%, transparent), color-mix(in srgb, var(--bg-elevated) 98%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    0 8px 16px rgba(17, 17, 17, 0.02);
}

.passthrough-cuj-gallery-shell {
  margin-top: 1.1rem;
}

.passthrough-cuj-gallery-shell .rules-gallery-controls {
  margin-top: 0.8rem;
  gap: 0.85rem;
}

.passthrough-cuj-gallery-shell .rules-gallery-nav {
  border-color: color-mix(in srgb, var(--soft-line) 62%, transparent);
  background: color-mix(in srgb, var(--bg-elevated) 98%, transparent);
  color: var(--text);
  opacity: 0.5;
}

.passthrough-cuj-gallery-shell .rules-gallery-nav:hover {
  border-color: var(--text);
  color: var(--text);
  opacity: 1;
}

.passthrough-cuj-gallery-shell .rules-gallery-dot {
  width: 7px;
  height: 7px;
  background: color-mix(in srgb, var(--text) 88%, transparent);
  opacity: 0.3;
}

.passthrough-cuj-gallery-shell .rules-gallery-dot.is-active {
  background: #2055dc;
  opacity: 0.92;
}

.passthrough-cuj-gallery-shell .rules-gallery-slide {
  gap: 0.9rem;
  padding: 1.05rem;
  border: 1px solid color-mix(in srgb, var(--soft-line) 46%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 97%, transparent), color-mix(in srgb, var(--bg-elevated) 98%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 6px 14px rgba(17, 17, 17, 0.016);
  grid-template-rows: auto auto;
}

.passthrough-cuj-slide {
  align-content: start;
}

.passthrough-cuj-slide-copy {
  display: grid;
  gap: 0.52rem;
  align-content: start;
  min-height: 7.2rem;
}

.passthrough-cuj-slide-kicker {
  margin: 0;
  font-family: "Mona Sans", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 55%, transparent);
}

.passthrough-cuj-slide-copy p {
  margin: 0;
  max-width: none;
  font-size: 0.95rem;
  line-height: 1.64;
}

.passthrough-cuj-microtakeaway {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  font-weight: 700;
  color: color-mix(in srgb, var(--text) 96%, transparent);
}

.passthrough-cuj-media {
  margin-top: 0;
  gap: 1rem;
}

.passthrough-cuj-media .distributed-figure-wide {
  margin: 0;
  width: 100%;
}

.passthrough-ux-page .passthrough-cuj-media .case-inline-image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: center;
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
}

.passthrough-ux-page .passthrough-cuj-media .case-inline-image.passthrough-cuj-image-fill {
  object-fit: cover;
}

@media (max-width: 980px) {
  .passthrough-ux-page .detail-grid,
  .passthrough-ux-page .detail-grid.passthrough-four-up,
  .passthrough-ux-page #s-approach .detail-grid.passthrough-feature-reco-grid {
    grid-template-columns: 1fr;
  }

  .passthrough-pui-controls-grid {
    grid-template-columns: 1fr;
  }

  .passthrough-ux-page #s-objects .distributed-two-up .case-inline-image {
    height: 250px;
  }

  .case-page-cross-device .rules-card-grid.passthrough-cuj-card-grid {
    grid-template-columns: 1fr;
  }

  .passthrough-cuj-slide-copy {
    min-height: 0;
  }

}

.case-page-cross-device .distributed-hero-media .case-inline-image {
  width: 100%;
  aspect-ratio: 2178 / 990;
  object-fit: cover;
  object-position: center;
}

.passthrough-ux-page .section + .section {
  margin-top: 0.9rem;
}

.passthrough-cuj-label {
  font-family: "Mona Sans", sans-serif;
  font-size: 0.77rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.45;
  margin: 0;
}

.passthrough-ux-page .case-research-section .section-header + .section-header {
  margin-top: 3rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--border);
}

/* ═══ Hero Canvas Frame ═══════════════════════════════════════════════════ */
.hero-canvas-frame {
  position: relative;
  width: 100%;
  height: min(68vh, 640px);
  margin: 1.2rem 0 0;
  overflow: hidden;
  isolation: isolate;
}

.hero-canvas-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;          /* hidden — used only as pixel data source */
  pointer-events: none;
}

.hero-canvas-frame canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.hero-hud {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  font-family: "Mona Sans", sans-serif;
}

.hero-hud-top {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.82rem 1.2rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .hero-hud-top {
  border-bottom-color: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.28);
}

.hero-hud-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  animation: hudDotPulse 2.6s ease-in-out infinite;
}

@keyframes hudDotPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  50% { opacity: 0.75; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0); }
}

.hero-hud-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 1.1rem 1.2rem;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

html[data-theme="dark"] .hero-hud-bottom {
  border-top-color: rgba(255, 255, 255, 0.05);
}

.hero-hud-name {
  margin: 0 0 0.2rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.7);
}

html[data-theme="dark"] .hero-hud-name {
  color: rgba(255, 255, 255, 0.7);
}

.hero-hud-desc {
  margin: 0;
  font-size: 0.67rem;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.33);
  max-width: 28rem;
}

html[data-theme="dark"] .hero-hud-desc {
  color: rgba(255, 255, 255, 0.26);
}

.hero-hud-stats {
  display: flex;
  gap: 1.8rem;
  align-items: flex-end;
}

.hero-hud-stat {
  display: flex;
  flex-direction: column;
  gap: 0.14rem;
}

.hero-hud-stat span {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .hero-hud-stat span {
  color: rgba(255, 255, 255, 0.24);
}

.hero-hud-stat strong {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(0, 0, 0, 0.62);
}

html[data-theme="dark"] .hero-hud-stat strong {
  color: rgba(255, 255, 255, 0.62);
}

@media (max-width: 640px) {
  .hero-canvas-frame {
    height: min(38vh, 280px);
  }

  .hero-hud-stats {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body,
  .site-nav,
  .reveal,
  .hero-media,
  .hero-media::before,
  .hero-media::after,
  .hero-media-halo,
  .hero-gradient,
  .hero-hud-dot {
    transition: none;
    animation: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   Galaxy XR App System — page-specific styles
   ============================================================ */

@keyframes lb-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes lb-backdrop-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes lb-img-in {
  from { opacity: 0; transform: scale(0.94) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes lb-img-out {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to { opacity: 0; transform: scale(0.96) translateY(8px); }
}
@keyframes galaxy-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes galaxy-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* ─── Page spacing ─── */
.galaxy-xr-page .case-hero { padding: 4.7rem 0 1.9rem; }

.galaxy-xr-page .case-summary,
.galaxy-xr-page .case-details,
.galaxy-xr-page .case-system-section,
.galaxy-xr-page .case-research-section,
.galaxy-xr-page .case-prototype-section,
.galaxy-xr-page .case-next { padding-top: 3.45rem; }

.galaxy-xr-page .case-summary,
.galaxy-xr-page .case-details,
.galaxy-xr-page .case-system-section,
.galaxy-xr-page .case-research-section,
.galaxy-xr-page .case-prototype-section,
.galaxy-xr-page .case-next,
.galaxy-xr-page .contact-section,
.galaxy-xr-page .page-end {
  content-visibility: auto;
  contain-intrinsic-size: 1px 960px;
}

.galaxy-xr-page .section + .section { margin-top: 1.15rem; }

.galaxy-xr-page .case-summary-grid,
.galaxy-xr-page .galaxy-xr-split,
.galaxy-xr-page .galaxy-xr-two-up { gap: 2.2rem; }

.galaxy-xr-page .rules-card-grid,
.galaxy-xr-page .galaxy-xr-flow-grid,
.galaxy-xr-page .galaxy-xr-ergo-grid,
.galaxy-xr-page .galaxy-xr-resize-grid,
.galaxy-xr-page .galaxy-xr-drag-drop-grid,
.galaxy-xr-page .galaxy-xr-app-eco-grid,
.galaxy-xr-page .outcome-signal-grid {
  contain: layout paint;
}

.galaxy-xr-page .case-summary-grid { align-items: start; }

.galaxy-xr-page .case-body p,
.galaxy-xr-page .spaceform-editorial-intro p { max-width: none; }

.galaxy-xr-page .section-header {
  margin-bottom: 1.85rem;
}

.galaxy-xr-page .spaceform-editorial-intro {
  display: grid;
  gap: 1rem;
  max-width: none;
}

.galaxy-xr-page .spaceform-editorial-intro p,
.galaxy-xr-page .case-body p {
  max-width: none;
  font-size: 0.97rem;
  line-height: 1.78;
  margin: 0;
}

.galaxy-xr-page .section-title {
  font-size: 15.2px;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.galaxy-xr-page .distributed-figure-wide {
  margin-top: 1.75rem;
  margin-bottom: 0;
}

.galaxy-xr-page .distributed-figure-wide + .distributed-figure-wide,
.galaxy-xr-page .distributed-two-up + .distributed-two-up,
.galaxy-xr-page .distributed-two-up + .distributed-figure-wide,
.galaxy-xr-page .distributed-figure-wide + .distributed-two-up {
  margin-top: 1.9rem;
}

.galaxy-xr-page .distributed-two-up {
  margin-top: 1.75rem;
}

.galaxy-xr-page .galaxy-xr-spaced-intro {
  margin-top: 1.9rem;
}

.galaxy-xr-page .galaxy-xr-spaced-intro--sm {
  margin-top: 1.65rem;
}

.galaxy-xr-page .galaxy-xr-top-gap-sm {
  margin-top: 1.4rem;
}

.galaxy-xr-page .galaxy-xr-bullet-block {
  margin-top: 1.2rem;
}

.galaxy-xr-page .galaxy-xr-problem-figure {
  margin-top: 0;
}

.galaxy-xr-page .galaxy-xr-problem-figure .case-inline-image {
  display: block;
  width: min(90%, 100%);
  margin: -2.5rem auto 0;
}

.galaxy-xr-page .galaxy-xr-problem-figure figcaption {
  margin-top: 0.4rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  line-height: 1.45;
  color: color-mix(in srgb, var(--text) 84%, transparent);
}

.galaxy-xr-page .case-caption,
.galaxy-xr-page p.page-caption {
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: none;
  margin-top: 0.75rem;
}

.galaxy-xr-page .fact-card,
.galaxy-xr-page .rules-card,
.galaxy-xr-page .galaxy-xr-mode-card,
.galaxy-xr-page .galaxy-xr-layer,
.galaxy-xr-page .galaxy-xr-flow-card,
.galaxy-xr-page .galaxy-xr-flow-media,
.galaxy-xr-page .galaxy-xr-scaling-figure-media,
.galaxy-xr-page .galaxy-xr-ergo-stat,
.galaxy-xr-page .galaxy-xr-surface-card .case-inline-image,
.galaxy-xr-page .galaxy-xr-toolbar-spec .case-inline-image,
.galaxy-xr-page .galaxy-xr-hsm-variant,
.galaxy-xr-page .galaxy-xr-notif-slot,
.galaxy-xr-page .galaxy-xr-resize-card,
.galaxy-xr-page .galaxy-xr-resize-media,
.galaxy-xr-page .galaxy-xr-tidyup-step,
.galaxy-xr-page .galaxy-xr-tidyup-sort-card,
.galaxy-xr-page .galaxy-xr-origin-card,
.galaxy-xr-page .galaxy-xr-recenter-scenario,
.galaxy-xr-page .galaxy-xr-bixby-state,
.galaxy-xr-page .galaxy-xr-drag-drop-card,
.galaxy-xr-page .slideshow-media-frame,
.galaxy-xr-page .lightbox-overlay img,
.galaxy-xr-page .galaxy-xr-layers-figure .case-inline-image,
.galaxy-xr-page .galaxy-xr-scene-card .case-inline-image,
.galaxy-xr-page .galaxy-xr-frame-card .case-inline-image,
.galaxy-xr-page .galaxy-xr-app-model-scene-media,
.galaxy-xr-page .galaxy-xr-app-model-scene .case-inline-image,
.galaxy-xr-page .galaxy-xr-scaling-figure .case-inline-image {
  border-radius: 0 !important;
}

.galaxy-xr-page .galaxy-xr-mode-tag,
.galaxy-xr-page .galaxy-xr-resize-tag,
.galaxy-xr-page .galaxy-xr-origin-tag,
.galaxy-xr-page .galaxy-xr-mode-tag.hsm,
.galaxy-xr-page .galaxy-xr-mode-tag.fsm,
.galaxy-xr-page .galaxy-xr-resize-tag.full,
.galaxy-xr-page .galaxy-xr-resize-tag.constrained,
.galaxy-xr-page .galaxy-xr-resize-tag.fixed,
.galaxy-xr-page .galaxy-xr-origin-tag.head,
.galaxy-xr-page .galaxy-xr-origin-tag.floor {
  border-radius: 0 !important;
}

.galaxy-xr-page .slideshow-arrow,
.galaxy-xr-page .slideshow-dot {
  border-radius: 0 !important;
}

/* ─── Fact cards ─── */
.galaxy-xr-page .case-facts { display: grid; gap: 1.15rem; align-content: start; }
.galaxy-xr-page .fact-card { padding: 0; }
.galaxy-xr-page .fact-card p {
  margin-top: 0.35rem; font-size: 0.88rem; line-height: 1.65; color: var(--muted);
}
.galaxy-xr-page .fact-card strong {
  display: inline; margin: 0; font-size: 0.98rem; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--text);
}

/* ─── Quote ─── */
.galaxy-xr-page .case-quote-band { padding-top: 2rem; padding-bottom: 2rem; }
.galaxy-xr-page .case-quote {
  max-width: 100%;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  font-style: italic; font-weight: 400; line-height: 1.45;
}

/* ─── Lists ─── */
.galaxy-xr-page .spaceform-bullet-list { margin: 0; padding-left: 1.15rem; }
.galaxy-xr-page .spaceform-bullet-list li { margin: 0.35rem 0; color: var(--muted); line-height: 1.65; }

/* ─── Grid spacing helpers ─── */
.galaxy-xr-page .rules-card-grid,
.galaxy-xr-page .galaxy-xr-scene-grid,
.galaxy-xr-page .outcome-signal-grid { margin-top: 1.6rem; }

.galaxy-xr-page .galaxy-xr-principles-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.galaxy-xr-page .galaxy-xr-model-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.galaxy-xr-page .galaxy-xr-model-card { width: 100%; text-align: left; }

.galaxy-xr-app-model-section .section-header {
  margin-bottom: 0.85rem;
}

.galaxy-xr-app-model-intro {
  margin-top: 0.4rem;
}

.galaxy-xr-app-model-intro p {
  max-width: 68rem;
  padding-top: 0.7rem;
  font-size: clamp(1.02rem, 1.2vw, 1.14rem);
  line-height: 1.9;
  color: color-mix(in srgb, var(--text) 90%, transparent);
}

.galaxy-xr-app-model-grid {
  margin-top: 1.95rem;
  gap: 1.4rem;
}

.galaxy-xr-mode-section .section-header {
  margin-bottom: 0.85rem;
}

.galaxy-xr-mode-intro {
  margin-top: 0.4rem;
}

.galaxy-xr-mode-intro p {
  max-width: 68rem;
  padding-top: 0.7rem;
  font-size: clamp(1.02rem, 1.2vw, 1.14rem);
  line-height: 1.9;
  color: color-mix(in srgb, var(--text) 90%, transparent);
}

.galaxy-xr-mode-principles {
  margin-top: 1.9rem;
  gap: 1.2rem;
}

.galaxy-xr-mode-principles .rules-card {
  padding: 1.45rem 1.35rem 1.55rem;
  gap: 0.82rem;
}

.galaxy-xr-mode-principles .rules-card-label {
  color: color-mix(in srgb, var(--text) 46%, transparent);
}

.galaxy-xr-mode-principles .rules-card-title {
  font-size: 0.98rem;
  line-height: 1.32;
}

.galaxy-xr-mode-principles .rules-card .rules-card-title + p {
  font-size: 0.9rem;
  line-height: 1.66;
  color: color-mix(in srgb, var(--text) 74%, transparent);
}

.galaxy-xr-page .galaxy-xr-split,
.galaxy-xr-page .galaxy-xr-two-up {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.galaxy-xr-page .galaxy-xr-feature-stack { display: grid; gap: 1.4rem; }

.galaxy-xr-layers-split {
  align-items: stretch;
}

.galaxy-xr-layers-column,
.galaxy-xr-layers-visual-column {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.galaxy-xr-layers-stack {
  margin-top: 1.5rem;
  flex: 1;
}

.galaxy-xr-layers-figure {
  margin: 1.5rem 0 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.galaxy-xr-layers-figure .case-inline-image {
  width: 100%;
  height: 100%;
  min-height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 8px;
  flex: 1;
}

.galaxy-xr-layers-figure figcaption {
  margin-top: 0.55rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  line-height: 1.45;
  color: color-mix(in srgb, var(--text) 84%, transparent);
}

.galaxy-xr-page .galaxy-xr-scene-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}

.galaxy-xr-page .galaxy-xr-scene-card,
.galaxy-xr-page .galaxy-xr-frame-card { display: grid; gap: 0.8rem; }

.galaxy-xr-page .galaxy-xr-scene-card .case-inline-image,
.galaxy-xr-page .galaxy-xr-frame-card .case-inline-image {
  width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
}

.galaxy-xr-page .galaxy-xr-frame-card .case-inline-image { aspect-ratio: 16 / 9; }

.galaxy-xr-page .galaxy-xr-scene-card h3,
.galaxy-xr-page .galaxy-xr-frame-card h3 {
  margin: 0; font-size: 0.98rem; font-weight: 600; line-height: 1.4;
}

.galaxy-xr-page .galaxy-xr-scene-card p,
.galaxy-xr-page .galaxy-xr-frame-card p {
  margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.62;
}

.galaxy-xr-page .galaxy-xr-gallery-shell { margin-top: 1.65rem; }

/* ─── Slideshow ─── */
.galaxy-xr-page .case-slideshow { margin-top: 1.7rem; user-select: none; }
.galaxy-xr-page .slideshow-track { position: relative; width: 100%; }
.galaxy-xr-page .slideshow-slide { display: none; margin: 0; }
.galaxy-xr-page .slideshow-slide.is-active {
  display: block; animation: galaxy-fade-in 260ms ease forwards;
}
.galaxy-xr-page .slideshow-slide.is-leaving {
  display: block; position: absolute; inset: 0;
  pointer-events: none; animation: galaxy-fade-out 180ms ease forwards;
}
.galaxy-xr-page .slideshow-media-frame {
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  border-radius: 8px; overflow: hidden;
}
.galaxy-xr-page .slideshow-media-frame .case-inline-image {
  width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; object-position: center; border-radius: 0;
}
.galaxy-xr-page .slideshow-slide figcaption {
  margin-top: 0.8rem; color: var(--muted); font-size: 0.78rem; line-height: 1.45;
}
.galaxy-xr-page .slideshow-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 1.2rem; margin-top: 1.1rem;
}
.galaxy-xr-page .slideshow-arrow {
  width: 2.3rem; height: 2.3rem;
  border: 1px solid var(--soft-line, #ddd); border-radius: 999px;
  background: transparent; color: var(--text); opacity: 0.55; cursor: pointer;
  transition: opacity 180ms ease, border-color 180ms ease;
}
.galaxy-xr-page .slideshow-arrow:hover { opacity: 1; border-color: var(--text); }
.galaxy-xr-page .slideshow-dots { display: flex; align-items: center; gap: 0.5rem; }
.galaxy-xr-page .slideshow-dot {
  width: 6px; height: 6px; padding: 0; border: none; border-radius: 50%;
  background: var(--text); opacity: 0.22; cursor: pointer;
  transition: opacity 180ms ease, transform 180ms ease;
}
.galaxy-xr-page .slideshow-dot.is-active { opacity: 0.85; transform: scale(1.35); }

/* ─── Lightbox ─── */
.galaxy-xr-page img[data-lightbox] { cursor: zoom-in; }
.lightbox-overlay {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.88); align-items: center; justify-content: center;
  cursor: zoom-out;
}
.lightbox-overlay.is-open { display: flex; animation: lb-backdrop-in 260ms ease forwards; }
.lightbox-overlay.is-closing { display: flex; animation: lb-backdrop-out 200ms ease forwards; }
.lightbox-overlay img {
  max-width: 92vw; max-height: 92vh; object-fit: contain; border-radius: 4px; cursor: default;
}
.lightbox-overlay.is-open img { animation: lb-img-in 300ms cubic-bezier(0.22,1,0.36,1) forwards; }
.lightbox-overlay.is-closing img { animation: lb-img-out 180ms ease forwards; }
.lightbox-close {
  position: absolute; top: 1.1rem; right: 1.4rem; border: none; background: none;
  color: #fff; font-size: 1.5rem; line-height: 1; opacity: 0.7; cursor: pointer;
  padding: 0.25rem 0.5rem;
}
.lightbox-close:hover { opacity: 1; }

/* ─── Space Mode cards (HSM / FSM) ─── */
.galaxy-xr-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1.6rem;
}
.galaxy-xr-mode-card {
  border: 1px solid var(--soft-line, rgba(0,0,0,0.1));
  border-radius: 10px;
  overflow: hidden;
}
.galaxy-xr-app-model-grid .galaxy-xr-mode-card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 97%, transparent), color-mix(in srgb, var(--bg-elevated) 98%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 10px 24px rgba(17, 17, 17, 0.03);
}
.galaxy-xr-mode-card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: center;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  display: block;
}
.galaxy-xr-app-model-grid .galaxy-xr-mode-card-img {
  aspect-ratio: 16 / 9;
  padding: 0.25rem;
  background:
    radial-gradient(circle at 50% 22%, color-mix(in srgb, var(--accent-secondary) 10%, transparent), transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 98%, transparent), color-mix(in srgb, var(--bg-elevated) 97%, transparent));
}
.galaxy-xr-mode-card-body {
  padding: 1.3rem 1.4rem 1.5rem;
}
.galaxy-xr-app-model-grid .galaxy-xr-mode-card-body {
  padding: 1.45rem 1.45rem 1.55rem;
}
.galaxy-xr-mode-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.75rem;
}
.galaxy-xr-mode-tag.hsm { background: rgba(32, 85, 220, 0.1); color: #2055DC; }
.galaxy-xr-mode-tag.fsm { background: rgba(200, 239, 60, 0.15); color: #7a9400; }
.dark .galaxy-xr-mode-tag.fsm { background: rgba(200, 239, 60, 0.12); color: #c8ef3c; }
.galaxy-xr-mode-card-body h3 { margin: 0 0 0.6rem; font-size: 1.05rem; font-weight: 600; line-height: 1.35; }
.galaxy-xr-mode-card-body p { margin: 0 0 0.85rem; color: var(--muted); font-size: 0.88rem; line-height: 1.65; }
.galaxy-xr-app-model-grid .galaxy-xr-mode-card-body h3 {
  margin-bottom: 0.65rem;
  font-size: 1.1rem;
  font-weight: 620;
  line-height: 1.28;
}
.galaxy-xr-app-model-grid .galaxy-xr-mode-card-body p {
  margin-bottom: 0.95rem;
  font-size: 0.93rem;
  line-height: 1.68;
  color: color-mix(in srgb, var(--text) 76%, transparent);
}
.galaxy-xr-mode-list {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 0.3rem;
}
.galaxy-xr-app-model-grid .galaxy-xr-mode-list {
  gap: 0.45rem;
}
.galaxy-xr-mode-list li {
  font-size: 0.83rem; color: var(--muted); line-height: 1.5;
  padding-left: 1rem; position: relative;
}
.galaxy-xr-app-model-grid .galaxy-xr-mode-list li {
  font-size: 0.87rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--text) 72%, transparent);
}
.galaxy-xr-mode-list li::before {
  content: "–"; position: absolute; left: 0; opacity: 0.5;
}

.galaxy-xr-app-model-scenes {
  margin-top: 1.95rem;
  gap: 1.45rem;
}

.galaxy-xr-app-model-scene {
  display: grid;
  gap: 0.75rem;
  margin: 0;
}

.galaxy-xr-app-model-scene-media {
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 95%, transparent), color-mix(in srgb, var(--bg-elevated) 97%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 10px 24px rgba(17, 17, 17, 0.045);
}

.galaxy-xr-app-model-scene .case-inline-image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.galaxy-xr-app-model-scene figcaption {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  line-height: 1.45;
  color: color-mix(in srgb, var(--text) 84%, transparent);
}

/* ─── Layer Stack ─── */
.galaxy-xr-layer-stack {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.8rem;
  max-width: 680px;
}
.galaxy-xr-layer {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0.9rem 1.2rem;
  border-radius: 8px;
  border-left: 3px solid;
  position: relative;
}
.galaxy-xr-layer-index {
  flex-shrink: 0;
  width: 1.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  opacity: 0.45;
  text-align: right;
}
.galaxy-xr-layer-name {
  flex: 1;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
}
.galaxy-xr-layer-desc {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.5;
  flex: 2;
}
.galaxy-xr-layer-types {
  font-size: 0.75rem;
  color: var(--muted);
  opacity: 0.75;
  flex: 2;
}
.galaxy-xr-layer[data-l="1"] {
  background: rgba(32, 85, 220, 0.06);
  border-color: #2055DC;
}
.galaxy-xr-layer[data-l="2"] {
  background: rgba(245, 145, 91, 0.06);
  border-color: #F5915B;
}
.galaxy-xr-layer[data-l="3"] {
  background: rgba(200, 239, 60, 0.06);
  border-color: #8aad00;
}
.galaxy-xr-layer[data-l="4"] {
  background: rgba(235, 235, 235, 0.08);
  border-color: color-mix(in srgb, var(--text) 30%, transparent);
}
.galaxy-xr-layer[data-l="5"] {
  background: rgba(235, 235, 235, 0.04);
  border-color: color-mix(in srgb, var(--text) 16%, transparent);
}

/* ─── Mode flow cards ─── */
.galaxy-xr-flow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.45rem;
  margin-top: 2.35rem;
}
.galaxy-xr-flow-card {
  padding: 1.3rem;
  border: 1px solid var(--soft-line, rgba(0,0,0,0.09));
  border-radius: 8px;
  display: grid;
  gap: 0.55rem;
}
.galaxy-xr-flow-story {
  display: grid;
  align-content: start;
  gap: 0.95rem;
}
.galaxy-xr-flow-media {
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 95%, transparent), color-mix(in srgb, var(--bg-elevated) 97%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 10px 24px rgba(17, 17, 17, 0.045);
}
.galaxy-xr-flow-card-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  transition: transform 300ms ease;
}
.galaxy-xr-flow-story:hover .galaxy-xr-flow-card-img,
.galaxy-xr-flow-story:focus-within .galaxy-xr-flow-card-img {
  transform: scale(1.015);
}
.galaxy-xr-flow-copy {
  display: grid;
  gap: 0.55rem;
}
.galaxy-xr-flow-num {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 44%, transparent);
}
.galaxy-xr-flow-card h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
}
.galaxy-xr-flow-card p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.62;
}
.galaxy-xr-flow-story h3 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 620;
  line-height: 1.32;
}
.galaxy-xr-flow-story p {
  margin: 0;
  font-size: 0.92rem;
  color: color-mix(in srgb, var(--text) 78%, transparent);
  line-height: 1.68;
}

/* ─── Ergonomics ─── */
.galaxy-xr-scaling-section .section-header {
  margin-bottom: 0.85rem;
}

.galaxy-xr-scaling-intro {
  margin-top: 0.4rem;
}

.galaxy-xr-scaling-intro p {
  max-width: 76rem;
  padding-top: 0.7rem;
  font-size: clamp(1.02rem, 1.2vw, 1.14rem);
  line-height: 1.9;
  color: color-mix(in srgb, var(--text) 90%, transparent);
}

.galaxy-xr-scaling-figure-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.3rem;
  margin-top: 2.2rem;
}

.galaxy-xr-scaling-figure {
  display: grid;
  align-content: start;
  gap: 0.7rem;
  margin: 0;
}

.galaxy-xr-scaling-figure-media {
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 95%, transparent), color-mix(in srgb, var(--bg-elevated) 97%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 10px 24px rgba(17, 17, 17, 0.045);
}

.galaxy-xr-scaling-figure .case-inline-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.galaxy-xr-scaling-figure figcaption {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1.45;
  color: color-mix(in srgb, var(--text) 84%, transparent);
}

.galaxy-xr-ergo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
  margin-top: 1.6rem;
}
.galaxy-xr-scaling-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.3rem;
  margin-top: 2rem;
}
.galaxy-xr-scaling-metrics .galaxy-xr-resize-card {
  align-content: start;
  gap: 1rem;
}
.galaxy-xr-scaling-metrics .galaxy-xr-resize-card .case-inline-image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.galaxy-xr-ergo-stat {
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--soft-line, rgba(0,0,0,0.09));
  border-radius: 8px;
}
.galaxy-xr-scaling-metrics .galaxy-xr-ergo-stat {
  min-height: 100%;
  padding: 1.45rem 1.35rem 1.5rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 97%, transparent), color-mix(in srgb, var(--bg-elevated) 98%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 10px 24px rgba(17, 17, 17, 0.03);
}
.galaxy-xr-ergo-value {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.galaxy-xr-scaling-metrics .galaxy-xr-ergo-value {
  font-size: clamp(2rem, 3.3vw, 2.7rem);
  letter-spacing: -0.03em;
}
.galaxy-xr-ergo-label {
  margin-top: 0.3rem;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.5;
}
.galaxy-xr-scaling-metrics .galaxy-xr-ergo-label {
  margin-top: 0.55rem;
  font-size: 0.93rem;
  line-height: 1.62;
  color: color-mix(in srgb, var(--text) 74%, transparent);
}

/* ─── Surfaces grid ─── */
.galaxy-xr-surfaces-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1.6rem;
}
.galaxy-xr-surface-card { display: grid; gap: 0.85rem; }
.galaxy-xr-surface-card .case-inline-image {
  width: 100%; height: auto; aspect-ratio: 16 / 10;
  object-fit: cover; border-radius: 6px;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
}
.galaxy-xr-surface-card h3 { margin: 0; font-size: 0.98rem; font-weight: 600; line-height: 1.4; }
.galaxy-xr-surface-card p { margin: 0; font-size: 0.88rem; color: var(--muted); line-height: 1.62; }

/* ─── Toolbar spec ─── */
.galaxy-xr-toolbar-spec {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  margin-top: 1.6rem;
}
.galaxy-xr-toolbar-spec figure { margin: 0; }
.galaxy-xr-toolbar-spec .case-inline-image {
  width: 100%; height: auto; border-radius: 6px;
}
.galaxy-xr-spec-list {
  display: grid;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.galaxy-xr-spec-list li {
  display: flex;
  justify-content: space-between;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--soft-line, rgba(0,0,0,0.07));
  padding-bottom: 0.6rem;
  gap: 1rem;
}
.galaxy-xr-spec-list li:last-child { border-bottom: none; padding-bottom: 0; }
.spec-key { color: var(--muted); }
.spec-val { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ─── Z-depth scale table ─── */
.galaxy-xr-scale-table { margin-top: 1.6rem; border-collapse: collapse; width: 100%; max-width: 480px; font-size: 0.84rem; }
.galaxy-xr-scale-table th { text-align: left; font-weight: 600; padding: 0.4rem 1rem 0.4rem 0; border-bottom: 1px solid var(--soft-line, rgba(0,0,0,0.12)); color: var(--text); }
.galaxy-xr-scale-table td { padding: 0.38rem 1rem 0.38rem 0; border-bottom: 1px solid var(--soft-line, rgba(0,0,0,0.06)); color: var(--muted); font-variant-numeric: tabular-nums; }
.galaxy-xr-scale-table td:first-child { font-weight: 600; color: var(--text); }
.galaxy-xr-scale-table tr:last-child td { border-bottom: none; }
.galaxy-xr-scale-table tr.highlight td { color: var(--text); opacity: 0.55; }

/* ─── HSM variants ─── */
.galaxy-xr-hsm-variants { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; margin-top: 1.6rem; }
.galaxy-xr-hsm-variant { padding: 1.1rem 1.15rem; border: 1px solid var(--soft-line, rgba(0,0,0,0.09)); border-radius: 8px; display: grid; gap: 0.4rem; }
.galaxy-xr-hsm-variant-num { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; opacity: 0.38; }
.galaxy-xr-hsm-variant h3 { margin: 0; font-size: 0.93rem; font-weight: 600; line-height: 1.4; }
.galaxy-xr-hsm-variant p { margin: 0; font-size: 0.82rem; color: var(--muted); line-height: 1.6; }

/* ─── Notification spawn slots ─── */
.galaxy-xr-notif-slots { display: grid; gap: 0.5rem; margin-top: 1.6rem; max-width: 640px; }
.galaxy-xr-notif-slot { display: flex; align-items: flex-start; gap: 1.1rem; padding: 0.85rem 1.1rem; border-radius: 8px; border-left: 3px solid; }
.galaxy-xr-notif-slot[data-s="top"] { background: rgba(32,85,220,0.05); border-color: #2055DC; }
.galaxy-xr-notif-slot[data-s="mid"] { background: rgba(245,145,91,0.05); border-color: #F5915B; }
.galaxy-xr-notif-slot[data-s="bot"] { background: rgba(200,239,60,0.05); border-color: #8aad00; }
.galaxy-xr-notif-slot[data-s="pin"] { background: rgba(235,235,235,0.06); border-color: color-mix(in srgb,var(--text) 28%,transparent); }
.galaxy-xr-notif-slot-label { flex-shrink: 0; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; opacity: 0.45; width: 3.6rem; padding-top: 0.1rem; }
.galaxy-xr-notif-slot-body h3 { margin: 0; font-size: 0.92rem; font-weight: 600; line-height: 1.3; }
.galaxy-xr-notif-slot-body p { margin: 0.2rem 0 0; font-size: 0.82rem; color: var(--muted); line-height: 1.55; }

/* ─── Window resizing categories ─── */
.galaxy-xr-resizing-section .section-header {
  margin-bottom: 0.85rem;
}
.galaxy-xr-resizing-intro {
  margin-top: 0.4rem;
}
.galaxy-xr-resizing-intro p {
  max-width: 74rem;
  padding-top: 0.7rem;
  font-size: clamp(1.02rem, 1.2vw, 1.14rem);
  line-height: 1.9;
  color: color-mix(in srgb, var(--text) 90%, transparent);
}
.galaxy-xr-resize-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.15rem; margin-top: 1.6rem; }
.galaxy-xr-resizing-grid {
  gap: 1.35rem;
  margin-top: 2rem;
}
.galaxy-xr-resize-card { padding: 1.3rem; border: 1px solid var(--soft-line, rgba(0,0,0,0.09)); border-radius: 8px; display: grid; gap: 0.5rem; }
.galaxy-xr-resizing-grid .galaxy-xr-resize-card {
  padding: 1.35rem;
  align-content: start;
  gap: 1rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 97%, transparent), color-mix(in srgb, var(--bg-elevated) 98%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 10px 24px rgba(17, 17, 17, 0.03);
}
.galaxy-xr-resize-media {
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 95%, transparent), color-mix(in srgb, var(--bg-elevated) 97%, transparent));
}
.galaxy-xr-resizing-grid .galaxy-xr-resize-media .case-inline-image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
.galaxy-xr-resize-copy {
  display: grid;
  gap: 0.65rem;
}
.galaxy-xr-resize-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 999px; margin-bottom: 0.15rem; }
.galaxy-xr-resizing-grid .galaxy-xr-resize-tag {
  width: fit-content;
  min-width: 0;
  padding: 0.28rem 0.9rem;
  font-size: 0.75rem;
  letter-spacing: 0.11em;
  border-radius: 999px;
  margin-bottom: 0;
}
.galaxy-xr-resize-tag.full { background: rgba(32,85,220,0.1); color: #2055DC; }
.galaxy-xr-resize-tag.constrained { background: rgba(245,145,91,0.1); color: #b85a24; }
.dark .galaxy-xr-resize-tag.constrained { color: #F5915B; }
.galaxy-xr-resize-tag.fixed { background: rgba(235,235,235,0.12); color: var(--muted); }
.galaxy-xr-resize-card h3 { margin: 0; font-size: 0.95rem; font-weight: 600; line-height: 1.4; }
.galaxy-xr-resize-card p { margin: 0; font-size: 0.84rem; color: var(--muted); line-height: 1.62; }
.galaxy-xr-resizing-grid .galaxy-xr-resize-card h3 {
  font-size: 1.02rem;
  font-weight: 620;
  line-height: 1.32;
}
.galaxy-xr-resizing-grid .galaxy-xr-resize-card p {
  font-size: 0.92rem;
  line-height: 1.68;
  color: color-mix(in srgb, var(--text) 78%, transparent);
}

/* ─── Positioning and Orientation ─── */
.galaxy-xr-positioning-section .section-header {
  margin-bottom: 0.85rem;
}

.galaxy-xr-positioning-intro {
  margin-top: 0.4rem;
}

.galaxy-xr-positioning-intro p {
  max-width: 74rem;
  padding-top: 0.7rem;
  font-size: clamp(1.02rem, 1.2vw, 1.14rem);
  line-height: 1.9;
  color: color-mix(in srgb, var(--text) 90%, transparent);
}

.galaxy-xr-positioning-principles {
  margin-top: 2rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.3rem;
}

.galaxy-xr-positioning-principles .rules-card {
  padding: 1.45rem 1.35rem 1.5rem;
  gap: 0.8rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 97%, transparent), color-mix(in srgb, var(--bg-elevated) 98%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 10px 24px rgba(17, 17, 17, 0.03);
}

.galaxy-xr-positioning-principles .rules-card-label {
  color: color-mix(in srgb, var(--text) 46%, transparent);
}

.galaxy-xr-positioning-principles .rules-card-title {
  font-size: 0.98rem;
  line-height: 1.32;
}

.galaxy-xr-positioning-principles .rules-card .rules-card-title + p {
  font-size: 0.91rem;
  line-height: 1.68;
  color: color-mix(in srgb, var(--text) 76%, transparent);
}

.galaxy-xr-positioning-scenes {
  margin-top: 1.95rem;
}

.galaxy-xr-positioning-scene {
  display: grid;
  gap: 0.75rem;
  margin: 0;
}

.galaxy-xr-positioning-scene .case-inline-image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.galaxy-xr-positioning-scene figcaption {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  line-height: 1.45;
  color: color-mix(in srgb, var(--text) 84%, transparent);
}

/* ─── Moving ─── */
/* ─── Tidy Up ─── */
.galaxy-xr-tidyup-steps { display: grid; gap: 0.45rem; margin-top: 1.5rem; }
.galaxy-xr-tidyup-step { display: flex; align-items: flex-start; gap: 1rem; padding: 0.8rem 1.05rem; background: color-mix(in srgb,var(--bg) 97%,transparent); border: 1px solid var(--soft-line, rgba(0,0,0,0.07)); border-radius: 7px; }
.galaxy-xr-tidyup-step-num { flex-shrink: 0; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.38; padding-top: 0.15rem; width: 1.4rem; }
.galaxy-xr-tidyup-step p { margin: 0; font-size: 0.88rem; color: var(--muted); line-height: 1.6; }
.galaxy-xr-tidyup-step strong { color: var(--text); }
.galaxy-xr-tidyup-sort-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; margin-top: 1.6rem; }
.galaxy-xr-tidyup-sort-card { padding: 1.15rem; border: 1px solid var(--soft-line, rgba(0,0,0,0.08)); border-radius: 8px; display: grid; gap: 0.4rem; }
.galaxy-xr-tidyup-sort-card .galaxy-xr-flow-num { display: block; }
.galaxy-xr-tidyup-sort-card h3 { margin: 0; font-size: 0.92rem; font-weight: 600; line-height: 1.4; }
.galaxy-xr-tidyup-sort-card p { margin: 0; font-size: 0.82rem; color: var(--muted); line-height: 1.6; }

/* ─── Recenter ─── */
.galaxy-xr-recenter-origins { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.15rem; margin-top: 1.6rem; }
.galaxy-xr-origin-card { padding: 1.3rem; border: 1px solid var(--soft-line, rgba(0,0,0,0.09)); border-radius: 8px; display: grid; gap: 0.5rem; }
.galaxy-xr-origin-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; padding: 0.22rem 0.6rem; border-radius: 999px; margin-bottom: 0.35rem; }
.galaxy-xr-origin-tag.head { background: rgba(32,85,220,0.1); color: #2055DC; }
.galaxy-xr-origin-tag.floor { background: rgba(200,239,60,0.12); color: #7a9400; }
.dark .galaxy-xr-origin-tag.floor { color: #c8ef3c; }
.galaxy-xr-origin-card h3 { margin: 0 0 0.3rem; font-size: 1.0rem; font-weight: 600; line-height: 1.35; }
.galaxy-xr-origin-card p { margin: 0; font-size: 0.86rem; color: var(--muted); line-height: 1.62; }
.galaxy-xr-recenter-scenarios { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; margin-top: 1.4rem; }
.galaxy-xr-recenter-scenario { padding: 1.1rem 1.15rem; border: 1px solid var(--soft-line, rgba(0,0,0,0.08)); border-radius: 8px; }
.galaxy-xr-recenter-scenario h3 { margin: 0 0 0.4rem; font-size: 0.9rem; font-weight: 600; line-height: 1.35; }
.galaxy-xr-recenter-scenario p { margin: 0; font-size: 0.82rem; color: var(--muted); line-height: 1.6; }

/* ─── Bixby ─── */
.galaxy-xr-bixby-states { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.15rem; margin-top: 1.6rem; }
.galaxy-xr-bixby-states--inline { margin-top: 0; }
.galaxy-xr-bixby-state { padding: 1.2rem 1.3rem; border: 1px solid var(--soft-line, rgba(0,0,0,0.09)); border-radius: 8px; display: grid; gap: 0.4rem; align-content: start; }
.galaxy-xr-bixby-state-num { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; opacity: 0.38; }
.galaxy-xr-bixby-state h3 { margin: 0; font-size: 0.95rem; font-weight: 600; line-height: 1.35; }
.galaxy-xr-bixby-state p { margin: 0; font-size: 0.84rem; color: var(--muted); line-height: 1.62; }

.galaxy-xr-input-modality {
  margin-top: 2.8rem;
  padding-top: 2rem;
  border-top: 1px solid color-mix(in srgb, var(--soft-line) 70%, transparent);
  display: grid;
  gap: 1.4rem;
}

.galaxy-xr-input-modality-label .galaxy-xr-bixby-state-num {
  opacity: 1;
  font-size: 0.72rem;
  color: var(--accent-secondary, #2055DC);
  letter-spacing: 0.09em;
}

.galaxy-xr-input-modality-body {
  display: grid;
  gap: 1.4rem;
}

/* ─── Drag shadow drops ─── */
.galaxy-xr-drag-drop-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.1rem; margin-top: 1.6rem; }
.galaxy-xr-drag-drop-card { padding: 1.2rem; border: 1px solid var(--soft-line, rgba(0,0,0,0.09)); border-radius: 8px; display: grid; align-content: start; gap: 1rem; }
.galaxy-xr-drag-drop-media {
  display: block;
}
.galaxy-xr-drag-drop-card .case-inline-image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.galaxy-xr-drag-drop-copy {
  display: grid;
  align-content: start;
  gap: 0.55rem;
}
.galaxy-xr-drag-drop-card .galaxy-xr-flow-num { display: block; }
.galaxy-xr-drag-drop-card h3 { margin: 0; font-size: 0.93rem; font-weight: 600; line-height: 1.4; }
.galaxy-xr-drag-drop-card p { margin: 0; font-size: 0.84rem; color: var(--muted); line-height: 1.62; }

/* ─── App Ecosystem cards ─── */
.galaxy-xr-app-eco-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
  margin-top: 2rem;
}

.galaxy-xr-app-eco-card {
  display: grid;
  align-content: start;
  border: 1px solid color-mix(in srgb, var(--soft-line) 58%, transparent);
  overflow: hidden;
}

.galaxy-xr-app-eco-media {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-elevated, #f5f5f5);
}

.galaxy-xr-app-eco-media .case-inline-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.galaxy-xr-app-eco-copy {
  padding: 1.4rem 1.5rem 1.6rem;
  display: grid;
  gap: 0.75rem;
  align-content: start;
}

.galaxy-xr-app-eco-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.galaxy-xr-app-eco-name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 640;
  line-height: 1.3;
}

.galaxy-xr-app-eco-copy > p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--muted);
}

.galaxy-xr-app-eco-list {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.3rem;
}

.galaxy-xr-app-eco-list li {
  font-size: 0.82rem;
  line-height: 1.58;
  color: var(--muted);
}

/* ─── Interaction accordion ─── */
.galaxy-xr-interaction-section { padding-top: 0.5rem; }

.galaxy-xr-interaction-subsection {
  border-left: 2px solid color-mix(in srgb, var(--accent-secondary) 44%, var(--line));
  padding-left: 1rem;
}

.galaxy-xr-interaction-subsection + .galaxy-xr-interaction-subsection {
  margin-top: 0.95rem;
  padding-top: 0.9rem;
  border-top: 1px solid color-mix(in srgb, var(--soft-line) 72%, transparent);
}

.galaxy-xr-interaction-section .galaxy-xr-interaction-subsection .case-subsection-heading {
  margin-top: 0;
}

.galaxy-xr-interaction-section .galaxy-xr-interaction-subsection:first-of-type .case-subsection-heading {
  margin-top: 0.95rem;
}

.galaxy-xr-interaction-section .galaxy-xr-interaction-subsection .section-header {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0.2rem;
}

.galaxy-xr-interaction-section .galaxy-xr-interaction-subsection .section-title {
  font-size: 0.88rem;
  font-weight: 650;
  letter-spacing: 0.065em;
  line-height: 1.35;
  color: color-mix(in srgb, var(--text) 82%, transparent);
}

.galaxy-xr-interaction-section .case-subsection-heading > p {
  margin: 0.45rem 0 0;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.65;
}

.galaxy-xr-interaction-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  width: 100%;
  padding: 0 0.1rem 0 0;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.galaxy-xr-interaction-toggle:focus-visible { outline: none; }

.galaxy-xr-interaction-toggle .section-title { margin: 0; }

.galaxy-xr-interaction-toggle::after {
  content: "";
  width: 1.78rem;
  height: 1.78rem;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 50%;
  background:
    linear-gradient(color-mix(in srgb, var(--text) 68%, transparent), color-mix(in srgb, var(--text) 68%, transparent)) center / 0.56rem 1px no-repeat,
    linear-gradient(color-mix(in srgb, var(--text) 68%, transparent), color-mix(in srgb, var(--text) 68%, transparent)) center / 1px 0.56rem no-repeat,
    color-mix(in srgb, var(--bg) 98%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 180ms ease, background 180ms ease;
  flex-shrink: 0;
}

.galaxy-xr-interaction-toggle[aria-expanded="true"]::after {
  background:
    linear-gradient(color-mix(in srgb, var(--text) 68%, transparent), color-mix(in srgb, var(--text) 68%, transparent)) center / 0.56rem 1px no-repeat,
    linear-gradient(color-mix(in srgb, var(--text) 68%, transparent), color-mix(in srgb, var(--text) 68%, transparent)) center / 0 0 no-repeat,
    color-mix(in srgb, var(--bg) 98%, transparent);
}

.galaxy-xr-interaction-subsection:hover .galaxy-xr-interaction-toggle::after,
.galaxy-xr-interaction-subsection:focus-within .galaxy-xr-interaction-toggle::after {
  border-color: color-mix(in srgb, var(--line) 86%, transparent);
  background:
    linear-gradient(color-mix(in srgb, var(--text) 72%, transparent), color-mix(in srgb, var(--text) 72%, transparent)) center / 0.56rem 1px no-repeat,
    linear-gradient(color-mix(in srgb, var(--text) 72%, transparent), color-mix(in srgb, var(--text) 72%, transparent)) center / 1px 0.56rem no-repeat,
    color-mix(in srgb, var(--bg) 98%, transparent);
}

.galaxy-xr-interaction-subsection:hover .galaxy-xr-interaction-toggle[aria-expanded="true"]::after,
.galaxy-xr-interaction-subsection:focus-within .galaxy-xr-interaction-toggle[aria-expanded="true"]::after {
  background:
    linear-gradient(color-mix(in srgb, var(--text) 72%, transparent), color-mix(in srgb, var(--text) 72%, transparent)) center / 0.56rem 1px no-repeat,
    linear-gradient(color-mix(in srgb, var(--text) 72%, transparent), color-mix(in srgb, var(--text) 72%, transparent)) center / 0 0 no-repeat,
    color-mix(in srgb, var(--bg) 98%, transparent);
}

.galaxy-xr-interaction-subsection:hover,
.galaxy-xr-interaction-subsection:focus-within {
  border-left-color: #2055dc;
}

.galaxy-xr-interaction-subsection.is-collapsed .case-subsection-heading > p,
.galaxy-xr-interaction-subsection.is-collapsed > :not(.case-subsection-heading) {
  display: none;
}

/* ─── Responsive ─── */
@media (max-width: 1080px) {
  .galaxy-xr-page .galaxy-xr-principles-grid,
  .galaxy-xr-page .galaxy-xr-model-nav,
  .galaxy-xr-page .galaxy-xr-scene-grid,
  .galaxy-xr-scaling-figure-grid,
  .galaxy-xr-flow-grid,
  .galaxy-xr-ergo-grid,
  .galaxy-xr-surfaces-grid,
  .galaxy-xr-hsm-variants,
  .galaxy-xr-resize-grid,
  .galaxy-xr-tidyup-sort-grid,
  .galaxy-xr-recenter-scenarios,
  .galaxy-xr-bixby-states,
  .galaxy-xr-drag-drop-grid,
  .galaxy-xr-app-eco-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .galaxy-xr-input-modality { margin-top: 2rem; padding-top: 1.5rem; }
}

@media (max-width: 820px) {
  .galaxy-xr-page .galaxy-xr-split,
  .galaxy-xr-page .galaxy-xr-two-up,
  .galaxy-xr-page .galaxy-xr-principles-grid,
  .galaxy-xr-page .galaxy-xr-model-nav,
  .galaxy-xr-page .galaxy-xr-scene-grid,
  .galaxy-xr-scaling-figure-grid,
  .galaxy-xr-mode-grid,
  .galaxy-xr-flow-grid,
  .galaxy-xr-ergo-grid,
  .galaxy-xr-surfaces-grid,
  .galaxy-xr-toolbar-spec,
  .galaxy-xr-hsm-variants,
  .galaxy-xr-resize-grid,
  .galaxy-xr-recenter-origins,
  .galaxy-xr-tidyup-sort-grid,
  .galaxy-xr-recenter-scenarios,
  .galaxy-xr-bixby-states,
  .galaxy-xr-drag-drop-grid,
  .galaxy-xr-app-eco-grid { grid-template-columns: minmax(0, 1fr); }

  .galaxy-xr-input-modality { margin-top: 1.5rem; padding-top: 1.2rem; }

  .galaxy-xr-page .case-hero { padding-top: 4rem; }
  .galaxy-xr-layer { flex-wrap: wrap; }
  .galaxy-xr-layer-types { display: none; }
  .galaxy-xr-layers-figure .case-inline-image {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
  .galaxy-xr-app-model-intro p,
  .galaxy-xr-scaling-intro p,
  .galaxy-xr-mode-intro p {
    padding-top: 0.6rem;
    font-size: 0.98rem;
    line-height: 1.8;
  }
}


/* ─────────────────────────────────────────
   Guardian & Passthrough System page
   ───────────────────────────────────────── */

.guardian-passthrough-page .case-summary,
.guardian-passthrough-page .case-details,
.guardian-passthrough-page .case-system-section,
.guardian-passthrough-page .case-next {
  padding-top: 3.45rem;
}

.guardian-passthrough-page .section + .section {
  margin-top: 1.1rem;
}

.guardian-passthrough-page .case-summary-grid,
.guardian-passthrough-page .galaxy-xr-two-up,
.guardian-passthrough-page .guardian-zone-split {
  gap: 2.2rem;
  align-items: start;
}

.guardian-passthrough-page .section-header {
  margin-bottom: 1.7rem;
}

.guardian-passthrough-page .section-title {
  font-size: 15.2px;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.guardian-passthrough-page .spaceform-editorial-intro {
  display: grid;
  gap: 0.95rem;
  max-width: none;
}

.guardian-passthrough-page .spaceform-editorial-intro p,
.guardian-passthrough-page .case-body p {
  max-width: none;
  font-size: 0.98rem;
  line-height: 1.76;
}

.guardian-passthrough-page .case-caption,
.guardian-passthrough-page .guardian-transition-trio figcaption,
.guardian-passthrough-page .guardian-floor-seq figcaption,
.guardian-passthrough-page .guardian-desk-pair figcaption,
.guardian-passthrough-page .guardian-window-layout figcaption,
.guardian-passthrough-page .guardian-dimension-row figcaption,
.guardian-passthrough-page .guardian-env-row figcaption {
  max-width: none;
  margin-top: 0.75rem;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--muted);
  opacity: 1;
}

.guardian-passthrough-page .case-facts {
  display: grid;
  gap: 1.15rem;
  align-content: start;
}

.guardian-passthrough-page .fact-card {
  padding: 0;
}

.guardian-passthrough-page .fact-card p {
  margin-top: 0.35rem;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--muted);
}

.guardian-passthrough-page .fact-card strong {
  display: inline;
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}

.guardian-passthrough-page .case-quote-band {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.guardian-passthrough-page .case-quote {
  max-width: 100%;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
  color: inherit;
}

.guardian-passthrough-page #s-problem .section-header {
  margin-bottom: 1.55rem;
}

.guardian-passthrough-page #s-problem .section-title {
  font-size: 1rem;
  font-weight: 640;
  letter-spacing: 0.005em;
}

.guardian-passthrough-page #s-problem .spaceform-editorial-intro:first-of-type {
  max-width: 72rem;
}

.guardian-passthrough-page #s-problem .spaceform-editorial-intro:first-of-type p {
  font-size: clamp(1.02rem, 1.22vw, 1.12rem);
  line-height: 1.72;
  color: color-mix(in srgb, var(--text) 96%, transparent);
}

.guardian-passthrough-page .guardian-problem-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
  gap: 2.8rem;
  align-items: start;
  margin-top: 2rem;
}

.guardian-passthrough-page .guardian-problem-layout .spaceform-editorial-intro {
  gap: 0;
}

.guardian-passthrough-page .guardian-problem-layout .spaceform-bullet-list {
  margin: 0;
  padding-left: 1.7rem;
}

.guardian-passthrough-page .guardian-problem-layout .spaceform-bullet-list li,
.guardian-passthrough-page .guardian-problem-layout .spaceform-editorial-intro > p {
  margin: 0.42rem 0;
  padding-left: 0.15rem;
  color: color-mix(in srgb, var(--text) 94%, transparent);
  font-size: clamp(0.94rem, 1.02vw, 1rem);
  line-height: 1.4;
}

.guardian-passthrough-page .guardian-problem-figure {
  width: 100%;
  margin: 0;
}

.guardian-passthrough-page .guardian-problem-figure .case-inline-image {
  width: 100%;
  aspect-ratio: 1.62 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
}

.guardian-hero-media {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 2rem;
}
.guardian-hero-media img,
.guardian-hero-media gif {
  width: 100%;
  display: block;
}

/* Transition trio — three GIFs side by side */
.guardian-transition-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.85rem;
}
.guardian-transition-trio figure {
  margin: 0;
  display: grid;
  align-content: start;
}
.guardian-transition-trio img {
  width: 100%;
  border-radius: 8px;
  display: block;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  box-shadow: 0 14px 30px rgba(17, 17, 17, 0.05);
}

/* Boundary type cards */
.guardian-boundary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.35rem;
  margin-top: 1.85rem;
}
.guardian-boundary-card {
  display: grid;
  align-content: start;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 98%, transparent), color-mix(in srgb, var(--bg-elevated) 96%, transparent));
  border: 1px solid color-mix(in srgb, var(--soft-line) 46%, transparent);
  border-radius: 0;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    0 10px 26px rgba(17, 17, 17, 0.03);
}
.guardian-boundary-card img {
  width: 100%;
  display: block;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.guardian-boundary-card-body {
  display: grid;
  gap: 0.55rem;
  padding: 1.2rem 1.2rem 1.35rem;
}
.guardian-boundary-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 52%, transparent);
  display: block;
  margin-bottom: 0;
}
.guardian-boundary-card-body h3 {
  font-size: 1.02rem;
  font-weight: 620;
  margin: 0;
  line-height: 1.38;
}
.guardian-boundary-card-body p {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.68;
  margin: 0;
}

/* Zone behavior split */
.guardian-zone-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.25rem;
  align-items: start;
  margin-top: 1.7rem;
}

/* Floor setup sequence */
.guardian-floor-seq {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.85rem;
}
.guardian-floor-seq figure {
  margin: 0;
  display: grid;
  align-content: start;
}
.guardian-floor-seq img {
  width: 100%;
  border-radius: 8px;
  display: block;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  box-shadow: 0 14px 30px rgba(17, 17, 17, 0.05);
}
.guardian-floor-seq-step {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 52%, transparent);
  display: block;
  margin-bottom: 0.55rem;
}

/* Spec annotation grid */
.guardian-spec-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: color-mix(in srgb, var(--soft-line) 52%, transparent);
  border-radius: 0;
  overflow: hidden;
  margin-top: 1.85rem;
  border: 1px solid color-mix(in srgb, var(--soft-line) 42%, transparent);
}
.guardian-spec-cell {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 98%, transparent), color-mix(in srgb, var(--bg-elevated) 96%, transparent));
  padding: 1.3rem 1.15rem 1.2rem;
}
.guardian-spec-value {
  font-size: clamp(1.45rem, 3vw, 1.72rem);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.48rem;
  color: var(--text);
}
.guardian-spec-label {
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--text) 62%, transparent);
  line-height: 1.5;
}

/* Desk area / window / dimension pairs */
.guardian-desk-pair,
.guardian-window-layout,
.guardian-dimension-row,
.guardian-env-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 1.7rem;
}
.guardian-dimension-row { align-items: start; }

.guardian-desk-pair figure,
.guardian-window-layout figure,
.guardian-dimension-row figure,
.guardian-env-row figure {
  margin: 0;
  display: grid;
  align-content: start;
}
.guardian-desk-pair img,
.guardian-window-layout img,
.guardian-dimension-row img,
.guardian-env-row img {
  width: 100%;
  display: block;
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  box-shadow: 0 14px 30px rgba(17, 17, 17, 0.05);
}

/* Wide single image */
.guardian-wide-img {
  margin-top: 1.7rem;
  border-radius: 8px;
  overflow: hidden;
}
.guardian-wide-img img {
  width: 100%;
  display: block;
  box-shadow: 0 16px 34px rgba(17, 17, 17, 0.05);
}

/* Principle cards */
.guardian-principle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.35rem;
  margin-top: 1.85rem;
}
.guardian-principle-card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 98%, transparent), color-mix(in srgb, var(--bg-elevated) 96%, transparent));
  border: 1px solid color-mix(in srgb, var(--soft-line) 46%, transparent);
  border-radius: 0;
  padding: 1.45rem 1.35rem 1.55rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    0 10px 26px rgba(17, 17, 17, 0.03);
}
.guardian-principle-num {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 42%, transparent);
  display: block;
  margin-bottom: 0.8rem;
}
.guardian-principle-card h3 {
  font-size: 1.01rem;
  font-weight: 620;
  margin: 0 0 0.55rem;
  line-height: 1.4;
}
.guardian-principle-card p {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.68;
  margin: 0;
}

/* Outcome band */
.guardian-outcome-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: color-mix(in srgb, var(--soft-line) 52%, transparent);
  border-radius: 0;
  overflow: hidden;
  margin-top: 1.85rem;
  border: 1px solid color-mix(in srgb, var(--soft-line) 42%, transparent);
}
.guardian-outcome-cell {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 98%, transparent), color-mix(in srgb, var(--bg-elevated) 96%, transparent));
  padding: 1.45rem 1.25rem 1.55rem;
}
.guardian-outcome-cell strong {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 48%, transparent);
  margin-bottom: 0.65rem;
}
.guardian-outcome-cell p {
  font-size: 0.94rem;
  line-height: 1.68;
  margin: 0;
  opacity: 1;
}
.guardian-outcome-cell a {
  font-size: 0.84rem;
  color: var(--accent-secondary);
}

@media (max-width: 700px) {
  .guardian-passthrough-page .case-summary,
  .guardian-passthrough-page .case-details,
  .guardian-passthrough-page .case-system-section,
  .guardian-passthrough-page .case-next {
    padding-top: 2.7rem;
  }

  .guardian-passthrough-page .section-header {
    margin-bottom: 1.35rem;
  }

  .guardian-passthrough-page #s-problem .spaceform-editorial-intro:first-of-type p {
    font-size: 0.98rem;
    line-height: 1.7;
  }

  .guardian-passthrough-page .guardian-problem-layout {
    grid-template-columns: 1fr;
    gap: 1.35rem;
    margin-top: 1.45rem;
  }

  .guardian-passthrough-page .guardian-problem-layout .spaceform-bullet-list {
    padding-left: 1.2rem;
  }

  .guardian-passthrough-page .guardian-problem-layout .spaceform-bullet-list li {
    font-size: 0.92rem;
    line-height: 1.45;
  }

  .guardian-transition-trio,
  .guardian-floor-seq,
  .guardian-boundary-grid,
  .guardian-zone-split,
  .guardian-desk-pair,
  .guardian-window-layout,
  .guardian-dimension-row,
  .guardian-principle-grid,
  .guardian-outcome-band,
  .guardian-env-row { grid-template-columns: 1fr; }

  .guardian-transition-trio,
  .guardian-floor-seq,
  .guardian-boundary-grid,
  .guardian-zone-split,
  .guardian-desk-pair,
  .guardian-window-layout,
  .guardian-dimension-row,
  .guardian-principle-grid,
  .guardian-outcome-band,
  .guardian-env-row,
  .guardian-spec-grid {
    gap: 1rem;
  }

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

/* ─── Site Footer ─── */
.site-footer {
  width: var(--container);
  margin: 0 auto;
  padding: 2rem 0 2.4rem;
  border-top: 1px solid rgba(128, 128, 128, 0.18);
  margin-top: 1rem;
}

.site-footer-copy {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  line-height: 1.7;
  text-align: center;
}