/*
 * Signal Cinema — GEO Inspector proving ground
 * One type family, one stable site shell, and scroll-led scenes in which
 * movement explains how evidence becomes a product decision.
 */

body[data-page="geo-inspector"] {
  --paper: #efeee8;
  --paper-2: #e5e3da;
  --paper-bright: #f9f8f4;
  --ink: #11120f;
  --muted: #565a52;
  --line: rgba(17, 18, 15, 0.17);
  --line-strong: rgba(17, 18, 15, 0.38);
  --signal: #6c45dc;
  --signal-deep: #46269f;
  --signal-soft: #ddd4fb;
  --acid: var(--signal);
  --panel: var(--paper-bright);
  --title-font: "Mozilla Headline", "Arial Narrow", Arial, sans-serif;
  --body-font: "Mozilla Headline", "Arial Narrow", Arial, sans-serif;
  --mono-font: "Mozilla Headline", "Arial Narrow", Arial, sans-serif;
  color: var(--ink);
  background-color: var(--paper);
  font-family: var(--body-font);
  font-stretch: 100%;
}

body[data-page="geo-inspector"] :is(button, input, textarea, select) {
  font-family: inherit;
}

body[data-page="geo-inspector"] :is(
  .case-kicker span,
  .motion-caption,
  .question-core span,
  .query-chip,
  .motion-source-links a,
  .signal-pills span,
  .result-proof span,
  .score-orbit span,
  .score-rationale,
  .soundscape-toggle,
  .site-header nav a,
  .footer-kicker,
  .footer-project-copy small,
  .footer-bottom,
  .case-section-nav,
  .case-section-nav-toggle,
  .case-section-nav a,
  .case-section-nav a::after
) {
  font-family: var(--body-font);
}

body[data-page="geo-inspector"].editorial-site {
  background:
    linear-gradient(rgba(17, 18, 15, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 18, 15, 0.026) 1px, transparent 1px),
    var(--paper);
  background-size: 48px 48px;
}

body[data-page="geo-inspector"].editorial-case .case-page {
  padding-top: 0;
  background: transparent;
}

body[data-page="geo-inspector"].editorial-case #system {
  width: 100%;
  max-width: none;
  padding-right: 0;
  padding-left: 0;
  color: var(--ink);
  background: transparent;
}

body[data-page="geo-inspector"] .pointer-glow {
  opacity: 0.72;
  background: radial-gradient(580px circle at var(--mx, 50vw) var(--my, 50vh), rgba(108, 69, 220, 0.12), transparent 54%);
}

body[data-page="geo-inspector"] .scroll-progress span {
  background: var(--signal);
}

body[data-page="geo-inspector"] .site-header.editorial-header,
body[data-page="geo-inspector"] .site-header.editorial-header.is-compact {
  font-family: var(--body-font);
}

body[data-page="geo-inspector"] .site-header .wordmark {
  font-family: var(--body-font);
  font-stretch: 80%;
  font-weight: 620;
}

body[data-page="geo-inspector"] .site-header nav,
body[data-page="geo-inspector"] .soundscape-toggle,
body[data-page="geo-inspector"] .header-contact {
  font-stretch: 85%;
  font-weight: 560;
}

/* Opening scene */

body[data-page="geo-inspector"] .case-hero {
  position: relative;
  isolation: isolate;
  min-height: 120svh;
  width: min(100%, var(--content));
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto auto 1fr;
  column-gap: clamp(12px, 1.35vw, 24px);
  align-content: start;
  margin: 0 auto;
  padding: clamp(128px, 16vh, 176px) var(--gutter) clamp(70px, 9vh, 118px);
  background: transparent;
}

body[data-page="geo-inspector"] .case-hero::before {
  position: absolute;
  z-index: -1;
  top: 15%;
  right: -6%;
  width: min(50vw, 760px);
  aspect-ratio: 1;
  border: 1px solid rgba(108, 69, 220, 0.18);
  border-radius: 50%;
  box-shadow:
    0 0 0 min(7vw, 104px) rgba(108, 69, 220, 0.035),
    0 0 0 min(14vw, 208px) rgba(108, 69, 220, 0.025);
  content: "";
}

body[data-page="geo-inspector"] .case-kicker {
  grid-column: 1 / 13;
  grid-row: 1;
  width: auto;
  margin: 0 0 clamp(42px, 7vh, 82px);
  gap: 8px;
  background: transparent;
}

body[data-page="geo-inspector"] .case-kicker span {
  padding: 7px 11px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.7rem;
  font-stretch: 78%;
  font-weight: 560;
  letter-spacing: 0.035em;
}

body[data-page="geo-inspector"] .case-title {
  grid-column: 1 / 13;
  grid-row: 2;
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--ink);
  font-family: var(--title-font);
  font-size: clamp(6rem, 14.6vw, 15rem);
  font-weight: 620;
  font-stretch: 108%;
  line-height: 0.7;
  letter-spacing: -0.074em;
  text-transform: none;
}

body[data-page="geo-inspector"] .case-title span {
  width: max-content;
  max-width: 100%;
}

body[data-page="geo-inspector"] .case-title span:last-child {
  margin-left: clamp(38px, 13vw, 220px);
  color: var(--signal);
  font-family: var(--title-font);
  font-style: normal;
  font-weight: 430;
  font-stretch: 125%;
  letter-spacing: -0.085em;
  text-transform: none;
}

body[data-page="geo-inspector"] .case-thesis {
  grid-column: 1 / 7;
  grid-row: 3;
  align-self: end;
  max-width: 700px;
  margin: clamp(58px, 9vh, 104px) 0 clamp(42px, 6vh, 72px);
  color: var(--ink);
  font-family: var(--title-font);
  font-size: clamp(2rem, 3.8vw, 4rem);
  font-weight: 390;
  font-stretch: 103%;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

body[data-page="geo-inspector"] .hero-signal {
  grid-column: 8 / 13;
  grid-row: 3;
  align-self: center;
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
  align-items: center;
  gap: 10px;
  margin-top: 42px;
  color: var(--muted);
  font-size: 0.68rem;
  font-stretch: 78%;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-page="geo-inspector"] .hero-signal i {
  position: relative;
  height: 1px;
  overflow: visible;
  background: var(--line-strong);
}

body[data-page="geo-inspector"] .hero-signal i::after {
  position: absolute;
  top: 50%;
  right: -1px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--signal);
  content: "";
  transform: translateY(-50%);
}

body[data-page="geo-inspector"] .case-hero-grid {
  grid-column: 1 / 13;
  grid-row: 4;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(12px, 1.35vw, 24px);
  align-items: stretch;
}

body[data-page="geo-inspector"] .case-summary {
  grid-column: 1 / 5;
  align-self: end;
  padding: 22px 0 0;
  border-top: 1px solid var(--ink);
}

body[data-page="geo-inspector"] .case-summary p {
  max-width: 42ch;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  font-stretch: 94%;
  line-height: 1.42;
}

body[data-page="geo-inspector"] .case-actions {
  margin-top: 30px;
}

body[data-page="geo-inspector"] .case-device {
  grid-column: 5 / 13;
  min-height: 0;
  aspect-ratio: 16 / 8.8;
  border: 1px solid rgba(108, 69, 220, 0.24);
  border-radius: 2px;
  background: var(--signal-soft);
  box-shadow: 0 34px 90px rgba(35, 25, 67, 0.14);
}

body[data-page="geo-inspector"] .case-device::before {
  position: absolute;
  z-index: 2;
  inset: -1px auto -1px 0;
  width: 2px;
  background: var(--signal);
  box-shadow: 0 0 24px rgba(108, 69, 220, 0.58);
  content: "";
  animation: geo-hero-scan 4.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

body[data-page="geo-inspector"] .case-device img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

body[data-page="geo-inspector"] .case-device figcaption {
  right: 18px;
  bottom: 16px;
  left: 18px;
  color: #fff;
  font-family: var(--body-font);
  font-size: 0.65rem;
  font-stretch: 78%;
  font-weight: 560;
}

@keyframes geo-hero-scan {
  0%, 14% { left: 0; opacity: 0; }
  22% { opacity: 1; }
  72% { left: calc(100% - 2px); opacity: 1; }
  80%, 100% { left: calc(100% - 2px); opacity: 0; }
}

/* Shared chapter system */

body[data-page="geo-inspector"] .motion-chapter {
  --scene-enter: 1;
  --scene-progress: 0;
  --scene-exit: 0;
  position: relative;
  width: 100%;
  min-height: 225svh;
  margin: 0;
  padding: 0;
  background: transparent;
}

body[data-page="geo-inspector"] .motion-stage,
body[data-page="geo-inspector"] #system .motion-stage {
  position: sticky;
  top: 0;
  width: 100%;
  min-height: 100svh;
  height: 100svh;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 1fr;
  column-gap: clamp(12px, 1.35vw, 24px);
  align-items: center;
  overflow: clip;
  padding: clamp(108px, 13vh, 142px) var(--gutter) clamp(48px, 7vh, 82px);
  color: var(--ink);
  background:
    linear-gradient(rgba(17, 18, 15, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 18, 15, 0.026) 1px, transparent 1px),
    var(--paper);
  background-size: 48px 48px;
  border: 0;
}

body[data-page="geo-inspector"] .motion-chapter:nth-of-type(even) .motion-stage {
  background:
    linear-gradient(rgba(17, 18, 15, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 18, 15, 0.024) 1px, transparent 1px),
    var(--paper-bright);
  background-size: 48px 48px;
}

body[data-page="geo-inspector"] .signal-thread {
  position: absolute;
  z-index: 8;
  top: clamp(88px, 10vh, 110px);
  right: var(--gutter);
  left: var(--gutter);
  height: 1px;
  background: var(--line);
  pointer-events: none;
}

body[data-page="geo-inspector"] .signal-thread::before,
body[data-page="geo-inspector"] .signal-thread::after {
  position: absolute;
  top: 50%;
  color: var(--muted);
  font-size: 0.62rem;
  font-stretch: 75%;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transform: translateY(calc(-100% - 8px));
}

body[data-page="geo-inspector"] .signal-thread::before {
  left: 0;
  content: "Signal in";
}

body[data-page="geo-inspector"] .signal-thread::after {
  right: 0;
  content: "Signal out";
}

body[data-page="geo-inspector"] .signal-thread span {
  position: absolute;
  top: 50%;
  left: calc(var(--scene-progress) * (100% - 12px));
  width: 12px;
  height: 12px;
  border: 3px solid var(--paper);
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 1px var(--signal), 0 0 28px rgba(108, 69, 220, 0.52);
  transform: translateY(-50%);
}

body[data-page="geo-inspector"] .motion-copy {
  grid-column: 1 / 5;
  position: relative;
  z-index: 5;
  align-self: center;
  padding-right: clamp(8px, 1.4vw, 24px);
  opacity: 1;
  transform: translate3d(0, calc((1 - var(--scene-enter)) * 48px), 0);
}

body[data-page="geo-inspector"] .motion-copy .kicker,
body[data-page="geo-inspector"] .motion-epilogue .kicker {
  margin: 0;
  color: var(--signal-deep);
  font-size: 0.72rem;
  font-stretch: 76%;
  font-weight: 650;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

body[data-page="geo-inspector"] .motion-copy h2,
body[data-page="geo-inspector"] #system .motion-copy h2,
body[data-page="geo-inspector"] .motion-epilogue h2 {
  margin: 18px 0 26px;
  color: var(--ink);
  font-family: var(--title-font);
  font-size: clamp(3.4rem, 5.6vw, 6.5rem);
  font-weight: 510;
  font-stretch: 112%;
  line-height: 0.86;
  letter-spacing: -0.065em;
}

body[data-page="geo-inspector"] .motion-copy > p:not(.kicker),
body[data-page="geo-inspector"] #system .motion-copy > p:not(.kicker),
body[data-page="geo-inspector"] .motion-epilogue > p:not(.kicker) {
  max-width: 43ch;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.32vw, 1.22rem);
  font-stretch: 94%;
  line-height: 1.44;
}

body[data-page="geo-inspector"] .motion-copy::after {
  display: block;
  width: calc(24px + var(--scene-progress) * 116px);
  height: 3px;
  margin-top: 34px;
  background: var(--signal);
  content: "";
}

body[data-page="geo-inspector"] :is(.question-field, .evidence-motion, .solution-visual, .score-motion, .result-motion) {
  grid-column: 5 / 13;
  position: relative;
  min-width: 0;
  width: 100%;
  height: min(68svh, 720px);
}

body[data-page="geo-inspector"] .motion-caption,
body[data-page="geo-inspector"] .score-rationale,
body[data-page="geo-inspector"] .result-proof {
  right: var(--gutter);
  bottom: clamp(22px, 3.5vh, 38px);
}

body[data-page="geo-inspector"] .motion-caption {
  position: absolute;
  z-index: 9;
  margin: 0;
  color: var(--ink);
  font-size: 0.66rem;
  font-stretch: 78%;
  font-weight: 590;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 1;
}

/* 01 — ambiguity converges into a single product question */

body[data-page="geo-inspector"] .question-field {
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 50% 50%, rgba(108, 69, 220, 0.14), transparent 34%),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(17, 18, 15, 0.055) 47px 48px),
    var(--paper-bright);
  box-shadow: 0 28px 80px rgba(37, 31, 54, 0.08);
}

body[data-page="geo-inspector"] .question-field::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(8% + var(--scene-progress) * 84%);
  width: 2px;
  height: auto;
  border: 0;
  border-radius: 0;
  background: var(--signal);
  box-shadow: 0 0 22px rgba(108, 69, 220, 0.45);
  content: "";
  transform: none;
}

body[data-page="geo-inspector"] .question-field::after {
  position: absolute;
  inset: auto auto 20px 22px;
  width: auto;
  height: auto;
  border: 0;
  color: var(--muted);
  content: "A page can look complete and still be invisible to a machine.";
  font-size: 0.68rem;
  font-stretch: 82%;
  font-weight: 560;
  transform: none;
}

body[data-page="geo-inspector"] .question-core {
  position: relative;
  z-index: 3;
  width: min(52%, 430px);
  aspect-ratio: 1.45 / 1;
  display: grid;
  place-content: center;
  padding: 32px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: rgba(249, 248, 244, 0.95);
  box-shadow: 18px 18px 0 rgba(108, 69, 220, 0.15);
  text-align: left;
  transform: scale(calc(0.74 + var(--scene-enter) * 0.26)) rotate(calc((1 - var(--scene-progress)) * -2deg));
}

body[data-page="geo-inspector"] .question-core span {
  color: var(--signal-deep);
  font-size: 0.68rem;
  font-stretch: 76%;
  font-weight: 650;
  letter-spacing: 0.045em;
}

body[data-page="geo-inspector"] .question-core strong {
  max-width: 6ch;
  margin-top: 14px;
  color: var(--ink);
  font-family: var(--title-font);
  font-size: clamp(2.4rem, 5vw, 5.4rem);
  font-weight: 560;
  font-stretch: 118%;
  line-height: 0.82;
  letter-spacing: -0.07em;
}

body[data-page="geo-inspector"] .query-chip {
  position: absolute;
  z-index: 4;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(249, 248, 244, 0.94);
  box-shadow: 0 14px 34px rgba(23, 18, 37, 0.09);
  color: var(--ink);
  font-size: 0.72rem;
  font-stretch: 84%;
  font-weight: 560;
  white-space: nowrap;
  opacity: calc(0.35 + var(--scene-enter) * 0.65);
}

body[data-page="geo-inspector"] .chip-one {
  top: calc(8% + var(--scene-progress) * 14%);
  left: calc(2% + var(--scene-progress) * 11%);
  transform: translate3d(calc((1 - var(--scene-enter)) * -100px), 0, 0) rotate(calc((1 - var(--scene-progress)) * -5deg));
}

body[data-page="geo-inspector"] .chip-two {
  top: calc(18% + var(--scene-progress) * 34%);
  right: calc(1% + var(--scene-progress) * 7%);
  transform: translate3d(calc((1 - var(--scene-enter)) * 100px), 0, 0) rotate(calc((1 - var(--scene-progress)) * 4deg));
}

body[data-page="geo-inspector"] .chip-three {
  bottom: calc(5% + var(--scene-progress) * 13%);
  left: calc(10% + var(--scene-progress) * 8%);
  transform: translate3d(0, calc((1 - var(--scene-enter)) * 90px), 0) rotate(calc((1 - var(--scene-progress)) * 3deg));
}

/* 02 — separate findings align into evidence */

body[data-page="geo-inspector"] .evidence-motion {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: center;
  gap: clamp(9px, 1vw, 16px);
}

body[data-page="geo-inspector"] .evidence-motion::before {
  position: absolute;
  inset: 13% 4%;
  border: 1px solid rgba(108, 69, 220, 0.22);
  content: "";
  transform: scaleX(var(--scene-progress));
  transform-origin: left;
}

body[data-page="geo-inspector"] .evidence-motion article {
  --lift: 0px;
  position: relative;
  z-index: 2;
  min-height: min(42svh, 390px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(20px, 2.1vw, 34px);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: rgba(249, 248, 244, 0.96);
  box-shadow: 14px 14px 0 rgba(108, 69, 220, 0.075);
  color: var(--muted);
  opacity: var(--scene-enter);
  transform: translate3d(0, calc((1 - var(--scene-enter)) * (100px + var(--lift))), 0) rotate(calc((1 - var(--scene-progress)) * var(--tilt, 0deg)));
}

body[data-page="geo-inspector"] .evidence-motion article:nth-child(1) { --lift: 56px; --tilt: -4deg; }
body[data-page="geo-inspector"] .evidence-motion article:nth-child(2) { --lift: 0px; --tilt: 3deg; }
body[data-page="geo-inspector"] .evidence-motion article:nth-child(3) { --lift: 84px; --tilt: -2deg; }

body[data-page="geo-inspector"] .evidence-motion b {
  color: var(--ink);
  font-family: var(--title-font);
  font-size: clamp(2.4rem, 4.3vw, 5rem);
  font-weight: 560;
  font-stretch: 116%;
  line-height: 0.84;
  letter-spacing: -0.065em;
}

body[data-page="geo-inspector"] .evidence-motion span {
  max-width: 18ch;
  color: var(--muted);
  font-size: clamp(0.76rem, 0.95vw, 0.94rem);
  font-stretch: 91%;
  line-height: 1.35;
}

body[data-page="geo-inspector"] .evidence-motion svg {
  z-index: 4;
  inset: 6% 0 auto;
  width: 100%;
  height: 88%;
  stroke: var(--signal);
  stroke-width: 1.2;
  stroke-dasharray: 1900;
  stroke-dashoffset: calc(1900 * (1 - var(--scene-progress)));
  opacity: 0.62;
}

body[data-page="geo-inspector"] .motion-source-links {
  position: absolute;
  z-index: 10;
  right: var(--gutter);
  bottom: clamp(22px, 3.5vh, 38px);
  display: flex;
  gap: 7px;
}

body[data-page="geo-inspector"] .motion-source-links a {
  padding: 7px 10px;
  color: var(--signal-deep);
  border: 1px solid rgba(108, 69, 220, 0.35);
  border-radius: 999px;
  background: var(--paper-bright);
  font-size: 0.62rem;
  font-stretch: 77%;
  font-weight: 620;
  letter-spacing: 0.035em;
}

/* 03 — the webpage is scanned and the tool joins it */

body[data-page="geo-inspector"] .solution-visual {
  display: grid;
  place-items: center;
  perspective: 1400px;
}

body[data-page="geo-inspector"] .browser-sheet {
  position: absolute;
  inset: 6% 13% 9% 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--paper-bright);
  box-shadow: 18px 18px 0 rgba(17, 18, 15, 0.055);
  transform: translate3d(calc((1 - var(--scene-enter)) * -110px), calc((1 - var(--scene-progress)) * 24px), 0) rotateY(calc((1 - var(--scene-progress)) * 7deg));
}

body[data-page="geo-inspector"] .browser-bar {
  height: 42px;
  border-color: var(--line);
}

body[data-page="geo-inspector"] .browser-bar i {
  background: var(--signal-soft);
  border: 1px solid rgba(108, 69, 220, 0.32);
}

body[data-page="geo-inspector"] .page-lines i {
  border-radius: 0;
  background: rgba(17, 18, 15, 0.09);
}

body[data-page="geo-inspector"] .page-lines i:nth-child(1) {
  background: rgba(108, 69, 220, 0.15);
}

body[data-page="geo-inspector"] .scan-beam {
  top: calc(8% + var(--scene-progress) * 72%);
  right: 13%;
  left: 0;
  height: 2px;
  background: var(--signal);
  box-shadow: 0 0 24px rgba(108, 69, 220, 0.58);
}

body[data-page="geo-inspector"] .scan-beam::after {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 5px 8px;
  color: #fff;
  background: var(--signal);
  content: "reading page";
  font-size: 0.58rem;
  font-stretch: 75%;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-page="geo-inspector"] .popup-card {
  right: 0;
  width: min(48%, 470px);
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper-bright);
  box-shadow: 22px 22px 0 rgba(108, 69, 220, 0.16);
  transform: translate3d(calc((1 - var(--scene-enter)) * 120px), calc((1 - var(--scene-progress)) * -25px), 50px) scale(calc(0.88 + var(--scene-enter) * 0.12));
}

body[data-page="geo-inspector"] .signal-pills {
  right: 2%;
  bottom: 1%;
  gap: 6px;
}

body[data-page="geo-inspector"] .signal-pills span,
body[data-page="geo-inspector"] .result-proof span {
  padding: 7px 10px;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper-bright);
  font-size: 0.61rem;
  font-stretch: 76%;
  font-weight: 620;
  letter-spacing: 0.035em;
}

/* 04 — weighted signals resolve into a model */

body[data-page="geo-inspector"] #system .motion-copy .score-explanation {
  max-width: 38ch;
  margin-top: 22px;
  padding-top: 20px;
  color: var(--ink);
  border-top: 1px solid var(--line-strong);
  font-size: clamp(0.95rem, 1.18vw, 1.12rem);
  font-weight: 510;
  line-height: 1.4;
}

body[data-page="geo-inspector"] .score-motion {
  display: grid;
  place-items: center;
}

body[data-page="geo-inspector"] .score-motion::before,
body[data-page="geo-inspector"] .score-motion::after {
  position: absolute;
  border: 1px solid rgba(108, 69, 220, 0.22);
  border-radius: 50%;
  content: "";
  transform: scale(calc(0.7 + var(--scene-progress) * 0.3));
}

body[data-page="geo-inspector"] .score-motion::before {
  width: min(62svh, 590px);
  aspect-ratio: 1;
}

body[data-page="geo-inspector"] .score-motion::after {
  width: min(48svh, 450px);
  aspect-ratio: 1;
  border-style: dashed;
  transform: scale(calc(0.72 + var(--scene-progress) * 0.28)) rotate(calc(var(--scene-progress) * 90deg));
}

body[data-page="geo-inspector"] .score-orbit,
body[data-page="geo-inspector"] #system .score-orbit {
  position: relative;
  z-index: 3;
  width: clamp(180px, 21vw, 300px);
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--paper-bright) 56%, transparent 57%),
    conic-gradient(var(--signal) calc(var(--scene-progress) * 360deg), var(--signal-soft) 0);
  box-shadow: 14px 14px 0 rgba(108, 69, 220, 0.14);
  color: var(--ink);
  text-align: center;
  transform: scale(calc(0.72 + var(--scene-enter) * 0.28));
}

body[data-page="geo-inspector"] .score-orbit strong,
body[data-page="geo-inspector"] #system .score-orbit strong {
  color: var(--ink);
  font-family: var(--title-font);
  font-size: clamp(4rem, 7vw, 7rem);
  font-weight: 600;
  font-stretch: 118%;
  line-height: 0.76;
  letter-spacing: -0.075em;
}

body[data-page="geo-inspector"] .score-orbit span,
body[data-page="geo-inspector"] #system .score-orbit span {
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.63rem;
  font-stretch: 76%;
  font-weight: 610;
  letter-spacing: 0.035em;
}

body[data-page="geo-inspector"] .score-signal,
body[data-page="geo-inspector"] #system .score-signal {
  z-index: 4;
  min-width: 168px;
  padding: 11px 13px;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: rgba(249, 248, 244, 0.96);
  box-shadow: 8px 8px 0 rgba(108, 69, 220, 0.08);
  font-size: 0.72rem;
  font-stretch: 86%;
  font-weight: 510;
  opacity: calc(0.2 + var(--scene-enter) * 0.8);
}

body[data-page="geo-inspector"] .score-signal b,
body[data-page="geo-inspector"] #system .score-signal b {
  color: var(--signal-deep);
  font-weight: 670;
}

body[data-page="geo-inspector"] .score-rationale,
body[data-page="geo-inspector"] #system .score-rationale {
  position: absolute;
  z-index: 8;
  margin: 0;
  padding: 9px 13px;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper-bright);
  font-size: 0.68rem;
  font-stretch: 80%;
  font-weight: 620;
  letter-spacing: 0.025em;
  opacity: 1;
}

/* 05 — product screens separate, revealing the finished system */

body[data-page="geo-inspector"] .result-motion {
  perspective: 1500px;
}

body[data-page="geo-inspector"] .result-motion::before {
  position: absolute;
  inset: 4% 2%;
  border: 1px solid rgba(108, 69, 220, 0.25);
  content: "";
  transform: scale(calc(0.82 + var(--scene-progress) * 0.18));
}

body[data-page="geo-inspector"] .result-shot {
  inset: 8% 5%;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--signal-soft);
  box-shadow: 16px 16px 0 rgba(108, 69, 220, 0.09);
  transform-origin: 50% 100%;
  will-change: transform;
}

body[data-page="geo-inspector"] .result-shot img {
  object-fit: cover;
}

body[data-page="geo-inspector"] .shot-one {
  z-index: 4;
  transform: translate3d(calc(var(--scene-progress) * -18%), calc(var(--scene-progress) * 10%), 0) rotate(calc(var(--scene-progress) * -4deg));
}

body[data-page="geo-inspector"] .shot-two {
  z-index: 3;
  transform: translate3d(calc(var(--scene-progress) * 19%), calc(var(--scene-progress) * -8%), -36px) rotate(calc(var(--scene-progress) * 4deg));
}

body[data-page="geo-inspector"] .shot-three {
  z-index: 2;
  transform: translate3d(calc(var(--scene-progress) * -9%), calc(var(--scene-progress) * -17%), -72px) rotate(calc(var(--scene-progress) * -2deg));
}

body[data-page="geo-inspector"] .shot-four {
  z-index: 1;
  transform: translate3d(calc(var(--scene-progress) * 10%), calc(var(--scene-progress) * 16%), -108px) rotate(calc(var(--scene-progress) * 2deg));
}

body[data-page="geo-inspector"] .result-proof {
  z-index: 9;
  max-width: 56%;
}

/* Resolution and footer */

body[data-page="geo-inspector"] .motion-epilogue {
  position: relative;
  min-height: 100svh;
  width: min(100%, var(--content));
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-content: center;
  column-gap: clamp(12px, 1.35vw, 24px);
  margin: 0 auto;
  padding: 150px var(--gutter);
  border-top: 1px solid var(--line);
}

body[data-page="geo-inspector"] .motion-epilogue::before {
  grid-column: 8 / 13;
  grid-row: 1 / 5;
  align-self: center;
  width: 100%;
  aspect-ratio: 1.4;
  border: 1px solid var(--signal);
  background:
    linear-gradient(135deg, transparent 49.7%, var(--signal) 49.8% 50.2%, transparent 50.3%),
    radial-gradient(circle at 50% 50%, var(--signal) 0 5px, transparent 6px);
  content: "";
  opacity: 0.72;
}

body[data-page="geo-inspector"] .motion-epilogue > :not(.primary-link) {
  grid-column: 1 / 8;
}

body[data-page="geo-inspector"] .motion-epilogue .primary-link {
  grid-column: 1 / 4;
  width: max-content;
  margin-top: 34px;
}

body[data-page="geo-inspector"] .case-page .case-work-footer,
body[data-page="geo-inspector"] .case-work-footer :is(.footer-topline h2, .footer-project-copy strong, .footer-kicker, .footer-project-copy small, .footer-bottom) {
  font-family: var(--body-font);
}

/* Keep the original compact case navigator; only align its type and accent. */

body[data-page="geo-inspector"].editorial-case .case-section-nav {
  display: grid;
  color: var(--ink);
  background: rgba(249, 248, 244, 0.94);
  border-color: var(--line);
  border-radius: 12px;
}

body[data-page="geo-inspector"].editorial-case .case-section-nav-toggle {
  color: var(--ink);
  font-family: var(--body-font);
  font-stretch: 80%;
}

body[data-page="geo-inspector"].editorial-case .case-section-nav a {
  font-family: var(--body-font);
  font-stretch: 75%;
  font-weight: 620;
}

body[data-page="geo-inspector"].editorial-case .case-section-nav a::after {
  font-family: var(--body-font);
  font-stretch: 88%;
}

body[data-page="geo-inspector"].editorial-case .case-section-nav a[aria-current="true"] {
  background: var(--signal-soft);
}

@media (max-width: 1080px) {
  body[data-page="geo-inspector"] .case-title {
    font-size: clamp(5.7rem, 15vw, 10rem);
  }

  body[data-page="geo-inspector"] .case-thesis {
    grid-column: 1 / 8;
  }

  body[data-page="geo-inspector"] .hero-signal {
    grid-column: 8 / 13;
  }

  body[data-page="geo-inspector"] .case-summary {
    grid-column: 1 / 6;
  }

  body[data-page="geo-inspector"] .case-device {
    grid-column: 6 / 13;
  }

  body[data-page="geo-inspector"] .motion-copy {
    grid-column: 1 / 6;
  }

  body[data-page="geo-inspector"] :is(.question-field, .evidence-motion, .solution-visual, .score-motion, .result-motion) {
    grid-column: 6 / 13;
  }

  body[data-page="geo-inspector"] .motion-copy h2,
  body[data-page="geo-inspector"] #system .motion-copy h2 {
    font-size: clamp(3rem, 5.9vw, 5.1rem);
  }

  body[data-page="geo-inspector"] .score-signal,
  body[data-page="geo-inspector"] #system .score-signal {
    min-width: 132px;
    max-width: 144px;
    padding: 9px;
    font-size: 0.62rem;
  }
}

@media (max-width: 760px) {
  body[data-page="geo-inspector"] .case-hero {
    min-height: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 112px 18px 72px;
  }

  body[data-page="geo-inspector"] .case-kicker,
  body[data-page="geo-inspector"] .case-title,
  body[data-page="geo-inspector"] .case-hero-grid {
    grid-column: 1 / 5;
  }

  body[data-page="geo-inspector"] .case-kicker {
    margin-bottom: 46px;
  }

  body[data-page="geo-inspector"] .case-title {
    font-size: clamp(4.2rem, 22vw, 7.2rem);
    line-height: 0.76;
  }

  body[data-page="geo-inspector"] .case-title span:last-child {
    margin-left: 0;
    font-stretch: 113%;
  }

  body[data-page="geo-inspector"] .case-thesis {
    grid-column: 1 / 5;
    margin: 54px 0 34px;
    font-size: clamp(2rem, 10vw, 3.3rem);
  }

  body[data-page="geo-inspector"] .hero-signal {
    grid-column: 1 / 5;
    grid-row: 4;
    margin: 0 0 36px;
  }

  body[data-page="geo-inspector"] .case-hero-grid {
    grid-row: 5;
    grid-template-columns: 1fr;
    gap: 36px;
  }

  body[data-page="geo-inspector"] .case-summary,
  body[data-page="geo-inspector"] .case-device {
    grid-column: 1;
  }

  body[data-page="geo-inspector"] .case-device {
    grid-row: 1;
    aspect-ratio: 4 / 3;
  }

  body[data-page="geo-inspector"] .case-device img {
    object-position: 68% center;
  }

  body[data-page="geo-inspector"] .case-summary {
    grid-row: 2;
  }

  body[data-page="geo-inspector"] .motion-chapter {
    min-height: 195svh;
  }

  body[data-page="geo-inspector"] .motion-stage,
  body[data-page="geo-inspector"] #system .motion-stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: center;
    gap: 24px;
    padding: 100px 18px 46px;
  }

  body[data-page="geo-inspector"] .signal-thread {
    top: 82px;
    right: 18px;
    left: 18px;
  }

  body[data-page="geo-inspector"] .motion-copy {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    padding: 0;
  }

  body[data-page="geo-inspector"] .motion-copy h2,
  body[data-page="geo-inspector"] #system .motion-copy h2 {
    max-width: 11ch;
    margin: 10px 0 13px;
    font-size: clamp(2.55rem, 11.5vw, 4.2rem);
  }

  body[data-page="geo-inspector"] .motion-copy > p:not(.kicker),
  body[data-page="geo-inspector"] #system .motion-copy > p:not(.kicker) {
    max-width: 44ch;
    font-size: 0.94rem;
    line-height: 1.35;
  }

  body[data-page="geo-inspector"] .motion-copy::after {
    display: none;
  }

  body[data-page="geo-inspector"] :is(.question-field, .evidence-motion, .solution-visual, .score-motion, .result-motion) {
    grid-column: 1;
    grid-row: 2;
    height: min(48svh, 430px);
    align-self: start;
  }

  body[data-page="geo-inspector"] .question-core {
    width: min(64%, 300px);
    padding: 22px;
  }

  body[data-page="geo-inspector"] .question-core strong {
    font-size: clamp(2.25rem, 12vw, 3.8rem);
  }

  body[data-page="geo-inspector"] .question-field::after {
    max-width: 70%;
    font-size: 0.6rem;
  }

  body[data-page="geo-inspector"] .query-chip {
    padding: 7px 10px;
    font-size: 0.62rem;
  }

  body[data-page="geo-inspector"] .evidence-motion {
    grid-template-columns: repeat(3, minmax(138px, 1fr));
    overflow: hidden;
  }

  body[data-page="geo-inspector"] .evidence-motion article {
    min-height: 240px;
    padding: 14px;
  }

  body[data-page="geo-inspector"] .evidence-motion b {
    font-size: 2rem;
  }

  body[data-page="geo-inspector"] .popup-card {
    width: 60%;
  }

  body[data-page="geo-inspector"] .signal-pills {
    max-width: 78%;
  }

  body[data-page="geo-inspector"] #system .motion-copy .score-explanation {
    display: none;
  }

  body[data-page="geo-inspector"] .score-orbit,
  body[data-page="geo-inspector"] #system .score-orbit {
    width: 150px;
  }

  body[data-page="geo-inspector"] .score-signal {
    min-width: 112px;
    max-width: 122px;
    padding: 7px;
    font-size: 0.55rem;
  }

  body[data-page="geo-inspector"] .score-rationale {
    right: auto;
    left: 18px;
    bottom: 18px;
    max-width: calc(100% - 86px);
    font-size: 0.58rem;
    white-space: normal;
  }

  body[data-page="geo-inspector"] .motion-caption,
  body[data-page="geo-inspector"] .motion-source-links,
  body[data-page="geo-inspector"] .result-proof {
    bottom: 18px;
  }

  body[data-page="geo-inspector"] .motion-caption {
    right: auto;
    left: 18px;
    max-width: calc(100% - 82px);
    font-size: 0.58rem;
  }

  body[data-page="geo-inspector"] .motion-source-links {
    right: 18px;
  }

  body[data-page="geo-inspector"] .result-proof {
    right: auto;
    left: 18px;
    max-width: calc(100% - 88px);
    justify-content: flex-start;
  }

  body[data-page="geo-inspector"] .result-proof span:nth-child(n + 3) {
    display: none;
  }

  body[data-page="geo-inspector"] .motion-epilogue {
    min-height: 86svh;
    display: block;
    padding: 110px 18px;
  }

  body[data-page="geo-inspector"] .motion-epilogue::before {
    display: block;
    width: 100%;
    margin-bottom: 52px;
    aspect-ratio: 1.9;
  }

  body[data-page="geo-inspector"] .motion-epilogue h2 {
    max-width: 11ch;
    font-size: clamp(3rem, 13vw, 4.8rem);
  }

  body[data-page="geo-inspector"].editorial-case .case-section-nav {
    right: 10px;
    transform: translateY(-50%) scale(0.92);
    transform-origin: right center;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="geo-inspector"] .case-device::before {
    display: none;
  }

  body[data-page="geo-inspector"] .motion-chapter {
    min-height: auto;
  }

  body[data-page="geo-inspector"] .motion-stage,
  body[data-page="geo-inspector"] #system .motion-stage {
    position: relative;
    min-height: 760px;
    height: auto;
  }

  body[data-page="geo-inspector"] .signal-thread span {
    left: calc(100% - 12px);
  }

  body[data-page="geo-inspector"] :is(.motion-copy, .question-core, .query-chip, .evidence-motion article, .browser-sheet, .popup-card, .score-orbit, .score-signal, .result-shot) {
    opacity: 1;
    transform: none;
  }
}

/*
 * Viewport-safe desktop composition
 *
 * The fixed header and signal rail reduce the usable canvas. Keep every
 * cinematic chapter inside that visible area, and give the denser score model
 * a wider text column so its hierarchy does not collapse into a tall stack.
 */
@media (min-width: 1081px) and (max-height: 1100px) {
  body[data-page="geo-inspector"] #system .motion-stage {
    padding-top: clamp(112px, 12vh, 128px);
    padding-bottom: clamp(56px, 6.5vh, 70px);
  }

  body[data-page="geo-inspector"] #system .motion-copy {
    grid-column: 1 / 6;
    max-width: 680px;
    padding-right: clamp(24px, 2vw, 38px);
  }

  body[data-page="geo-inspector"] #system .motion-copy h2 {
    max-width: 7.4ch;
    margin: 15px 0 21px;
    font-size: clamp(4rem, 4.75vw, 5.7rem);
    line-height: 0.88;
  }

  body[data-page="geo-inspector"] #system .motion-copy > p:not(.kicker) {
    max-width: 46ch;
    font-size: clamp(0.94rem, 1vw, 1.06rem);
    line-height: 1.42;
  }

  body[data-page="geo-inspector"] #system .motion-copy .score-explanation {
    max-width: 43ch;
    margin-top: 18px;
    padding-top: 17px;
  }

  body[data-page="geo-inspector"] #system .motion-copy::after {
    margin-top: 24px;
  }

  body[data-page="geo-inspector"] #system .score-motion {
    grid-column: 6 / 13;
    height: min(64svh, 620px);
  }

  body[data-page="geo-inspector"] #system .score-motion::before {
    width: min(56svh, 535px);
  }

  body[data-page="geo-inspector"] #system .score-motion::after {
    width: min(43svh, 410px);
  }

  body[data-page="geo-inspector"] #system .score-rationale {
    bottom: clamp(34px, 4.5vh, 50px);
  }
}

/* Keep cinematic layers from creating a horizontal document scroll while
   preserving their in-frame movement. */
html:has(body.editorial-site) {
  overflow-x: clip;
}

body.editorial-site {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body[data-page="geo-inspector"] :is(.question-field, .solution-visual, .score-model-stage) {
  overflow: hidden;
}

@media (max-width: 760px) {
  body.editorial-site .case-work-footer .footer-projects {
    box-sizing: border-box;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow-x: auto;
    overflow-y: hidden;
  }
}

/* ========================================================================== */
/* Whole-site direction                                                       */
/* ========================================================================== */

body.editorial-site {
  --title-font: "Mozilla Headline", "Arial Narrow", Arial, sans-serif;
  --body-font: "Mozilla Headline", "Arial Narrow", Arial, sans-serif;
  --mono-font: "Mozilla Headline", "Arial Narrow", Arial, sans-serif;
  font-family: var(--body-font);
  font-stretch: 100%;
}

body.editorial-site :is(
  h1, h2, h3, h4, p, a, button, span, strong, b, em, i, small, time,
  .wordmark, .section-number, .project-meta, .project-media figcaption,
  .gallery-kicker, .gallery-stats span, .gallery-item figcaption,
  .soundscape-toggle, .footer-bottom, .footer-kicker, .flow div,
  .score-row b, .screenshot-figure figcaption
) {
  font-family: var(--body-font);
}

body[data-page="home"] {
  --signal: #8bed71;
  --signal-deep: #285f36;
  --paper: #efeee8;
  --paper-2: #e4e2d9;
  --ink: #11120f;
  --muted: #555a52;
}

body[data-page="gallery"] {
  --signal: #ff805e;
  --signal-deep: #9f301c;
  --paper: #f0eee8;
  --paper-2: #e7e2d8;
}

body[data-page="deeview"] { --signal: #ef739b; --signal-deep: #8d274a; --acid: var(--signal); }
body[data-page="admin-dashboard"] { --signal: #4f83ff; --signal-deep: #244fa8; --acid: var(--signal); }
body[data-page="mobile-design-system"] { --signal: #75d5b1; --signal-deep: #1d6c54; --acid: var(--signal); }

body.editorial-site .site-header.editorial-header {
  font-family: var(--body-font);
}

body.editorial-site .site-header .wordmark,
body.editorial-site .site-header nav,
body.editorial-site .site-header .soundscape-toggle,
body.editorial-site .site-header .header-contact {
  font-stretch: 82%;
}

body.editorial-site .site-header .wordmark {
  font-weight: 620;
  letter-spacing: 0.015em;
}

body.editorial-site .site-header nav a,
body.editorial-site .site-header .header-contact {
  font-weight: 560;
}

/* Home — the trailer */

body[data-page="home"] .hero {
  --hero-progress: 0;
  min-height: 230svh;
  padding-top: clamp(130px, 16vh, 176px);
  padding-bottom: 0;
}

body[data-page="home"] .hero-eyebrow {
  font-stretch: 78%;
  font-weight: 600;
  letter-spacing: 0.045em;
}

body[data-page="home"] .hero-copy {
  margin-top: clamp(78px, 12vh, 136px);
}

body[data-page="home"] .hero h1 {
  font-family: var(--title-font);
  font-size: clamp(5.8rem, 10.4vw, 11.2rem);
  font-weight: 500;
  font-stretch: 106%;
  line-height: 0.78;
  letter-spacing: -0.065em;
}

body[data-page="home"] .hero-line:first-child > span {
  transform: translate3d(calc(var(--hero-progress) * -7vw), 0, 0);
}

body[data-page="home"] .hero-line:nth-child(2) > span {
  transform: translate3d(calc(var(--hero-progress) * 5vw), 0, 0);
}

body[data-page="home"] .hero h1 em {
  display: inline-block;
  color: var(--signal-deep);
  font-family: var(--title-font);
  font-style: normal;
  font-weight: 620;
  font-stretch: 125%;
  letter-spacing: -0.08em;
}

body[data-page="home"] .hero h1 em::after {
  height: 0.045em;
  border-radius: 0;
}

body[data-page="home"] .hero-intro {
  width: min(100%, 700px);
  transform: translate3d(calc(var(--hero-progress) * -3vw), 0, 0);
}

body[data-page="home"] .hero-intro p {
  font-size: clamp(1.2rem, 1.75vw, 1.62rem);
  font-stretch: 96%;
  line-height: 1.38;
}

body[data-page="home"] .hero-stage {
  min-height: 145svh;
  align-items: start;
  margin-top: clamp(100px, 14vh, 160px);
}

body[data-page="home"] .stage-note {
  position: sticky;
  top: 118px;
  font-stretch: 84%;
}

body[data-page="home"] .clarity-field {
  position: sticky;
  top: 104px;
  min-height: min(72svh, 690px);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 0;
  box-shadow: 20px 20px 0 rgba(40, 95, 54, 0.12);
}

body[data-page="home"] .field-noise {
  opacity: calc(1 - var(--hero-progress) * 0.58);
  transform: translate3d(calc(var(--hero-progress) * -4vw), 0, 0);
}

body[data-page="home"] .field-axis {
  transform: translate3d(calc(var(--hero-progress) * -1.6vw), 0, 0);
}

body[data-page="home"] .field-order {
  transform: translate3d(calc(var(--hero-progress) * -2.6vw), 0, 0);
}

body[data-page="home"] .noise-pill,
body[data-page="home"] .order-kicker,
body[data-page="home"] .order-row,
body[data-page="home"] .order-foot {
  font-family: var(--body-font);
  font-stretch: 78%;
}

body[data-page="home"] .order-score {
  font-family: var(--title-font);
  font-weight: 560;
  font-stretch: 118%;
  letter-spacing: -0.07em;
}

body[data-page="home"] .proof {
  padding-top: clamp(130px, 17vh, 200px);
  padding-bottom: clamp(140px, 19vh, 230px);
}

body[data-page="home"] .section-label,
body[data-page="home"] .section-number,
body[data-page="home"] .project-meta,
body[data-page="home"] .project-type,
body[data-page="home"] .project-media figcaption {
  font-stretch: 77%;
  font-weight: 610;
  letter-spacing: 0.045em;
}

body[data-page="home"] .metric {
  min-height: clamp(220px, 25vw, 340px);
  padding-top: 42px;
  transition: color 300ms ease, background-color 300ms ease;
}

body[data-page="home"] .metric:hover {
  color: var(--ink);
  background: var(--signal);
}

body[data-page="home"] .metric strong {
  font-family: var(--title-font);
  font-size: clamp(4.7rem, 7vw, 7.8rem);
  font-weight: 560;
  font-stretch: 118%;
  letter-spacing: -0.075em;
}

body[data-page="home"] .metric span {
  font-size: 0.88rem;
  font-stretch: 88%;
}

body[data-page="home"] .section-heading {
  margin-bottom: 150px;
}

body[data-page="home"] :is(.section-heading, .about-head) h2,
body[data-page="home"] .approach-intro h2 {
  font-family: var(--title-font);
  font-weight: 520;
  font-stretch: 112%;
  line-height: 0.82;
  letter-spacing: -0.07em;
}

body[data-page="home"] .section-heading h2 {
  font-size: clamp(5.4rem, 10vw, 10rem);
}

body[data-page="home"] .project {
  --project-progress: 0.5;
  --project-accent: var(--signal);
  position: relative;
  min-height: 145svh;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(44px, 6vw, 100px);
  align-items: start;
  margin: 0;
  padding-bottom: 16svh;
}

body[data-page="home"] .project:has(.project-media-admin) { --project-accent: #4f83ff; }
body[data-page="home"] .project:has(.project-media-mobile) { --project-accent: #5dbd99; }
body[data-page="home"] .project:has(.project-media-geo) { --project-accent: #7350df; }
body[data-page="home"] .project:has(.project-media-deeview) { --project-accent: #e96892; }
body[data-page="home"] .project:has(.project-media-hollow) { --project-accent: #e3a625; }

body[data-page="home"] .project-meta {
  grid-column: 1 / -1;
  position: sticky;
  top: 68px;
  z-index: 6;
  padding: 15px 0;
  background: rgba(239, 238, 232, 0.92);
  backdrop-filter: blur(16px);
}

body[data-page="home"] .project-meta::after {
  grid-column: 1 / -1;
  width: calc(var(--project-progress) * 100%);
  height: 2px;
  margin-top: 13px;
  background: var(--project-accent);
  content: "";
}

body[data-page="home"] .project-media-link {
  grid-column: 1;
  grid-row: 2;
  position: sticky;
  top: 118px;
  align-self: start;
  padding-top: 28px;
}

body[data-page="home"] .project-media {
  isolation: isolate;
  aspect-ratio: 1.42 / 1;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  box-shadow: 18px 18px 0 color-mix(in srgb, var(--project-accent), transparent 82%);
}

body[data-page="home"] .project-media::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  background: radial-gradient(380px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), transparent, rgba(15, 15, 13, 0.12));
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}

body[data-page="home"] .project-media:hover::after { opacity: 1; }

body[data-page="home"] .project-media img {
  transform: scale(calc(1.075 - var(--project-progress) * 0.055)) translate3d(0, calc((0.5 - var(--project-progress)) * 4%), 0);
}

body[data-page="home"] .project-story {
  grid-column: 2;
  grid-row: 2;
  position: sticky;
  top: 145px;
  display: block;
  align-self: start;
  margin-top: 58px;
}

body[data-page="home"] .project-story h3 {
  margin: 0;
  font-family: var(--title-font);
  font-size: clamp(3.3rem, 5.2vw, 5.6rem);
  font-weight: 520;
  font-stretch: 111%;
  line-height: 0.84;
  letter-spacing: -0.067em;
}

body[data-page="home"] .project-copy {
  margin-top: 48px;
  padding-top: 24px;
}

body[data-page="home"] .project-copy > p {
  font-size: 1.07rem;
  font-stretch: 94%;
  line-height: 1.45;
}

body[data-page="home"] .project-link {
  color: color-mix(in srgb, var(--project-accent), var(--ink) 28%);
  font-stretch: 86%;
}

body[data-page="home"] .approach-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    #0e100e;
  background-size: 48px 48px;
}

body[data-page="home"] .approach-section::before {
  position: absolute;
  z-index: -1;
  top: -20vw;
  left: -18vw;
  width: 72vw;
  aspect-ratio: 1;
  border: 1px solid rgba(139, 237, 113, 0.22);
  border-radius: 50%;
  box-shadow: 0 0 0 9vw rgba(139, 237, 113, 0.025), 0 0 0 18vw rgba(139, 237, 113, 0.018);
  content: "";
}

body[data-page="home"] .approach-intro h2 {
  font-size: clamp(5rem, 8.5vw, 8rem);
}

body[data-page="home"] .approach-list li {
  transition: padding-left 480ms cubic-bezier(0.22, 1, 0.36, 1), color 240ms ease;
}

body[data-page="home"] .approach-list li:hover {
  padding-left: 24px;
  color: var(--signal);
}

body[data-page="home"] .approach-list h3 {
  font-family: var(--title-font);
  font-size: clamp(2.1rem, 3.3vw, 3.5rem);
  font-weight: 500;
  font-stretch: 108%;
  letter-spacing: -0.045em;
}

body[data-page="home"] .about-head h2 {
  font-size: clamp(5.1rem, 9vw, 9rem);
}

body[data-page="home"] .about-lead p {
  font-size: clamp(1.55rem, 2.4vw, 2.35rem);
  font-stretch: 98%;
  line-height: 1.22;
}

body.editorial-site .contact-link > span:first-child {
  font-family: var(--title-font);
  font-size: clamp(7rem, 16vw, 16rem);
  font-style: normal;
  font-weight: 590;
  font-stretch: 125%;
  letter-spacing: -0.085em;
}

/* Case studies — one cinematic shell, project-specific signal */

body.editorial-case:not([data-page="geo-inspector"]) .case-page {
  background:
    linear-gradient(rgba(17, 18, 15, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 18, 15, 0.025) 1px, transparent 1px),
    var(--paper);
  background-size: 48px 48px;
}

body.editorial-case:not([data-page="geo-inspector"]) .case-hero {
  position: relative;
  isolation: isolate;
  min-height: 118svh;
  width: min(100%, var(--content));
  padding: clamp(130px, 16vh, 178px) var(--gutter) clamp(80px, 11vh, 130px);
  overflow: hidden;
}

body.editorial-case:not([data-page="geo-inspector"]) .case-hero::before {
  position: absolute;
  z-index: -1;
  top: 10%;
  right: -9%;
  width: min(58vw, 860px);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--signal), transparent 72%);
  border-radius: 50%;
  box-shadow: 0 0 0 8vw color-mix(in srgb, var(--signal), transparent 95%), 0 0 0 16vw color-mix(in srgb, var(--signal), transparent 97%);
  content: "";
}

body.editorial-case:not([data-page="geo-inspector"]) .case-kicker span {
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-stretch: 78%;
  font-weight: 600;
  letter-spacing: 0.04em;
}

body.editorial-case:not([data-page="geo-inspector"]) .case-title {
  color: var(--ink);
  font-family: var(--title-font);
  font-size: clamp(6rem, 12.2vw, 13.5rem);
  font-weight: 590;
  font-stretch: 108%;
  line-height: 0.73;
  letter-spacing: -0.075em;
  text-transform: none;
}

body.editorial-case:not([data-page="geo-inspector"]) .case-title span:last-child {
  margin-left: clamp(34px, 10vw, 170px);
  color: var(--signal-deep);
  font-family: var(--title-font);
  font-style: normal;
  font-weight: 430;
  font-stretch: 122%;
  letter-spacing: -0.08em;
  text-transform: none;
}

body.editorial-case:not([data-page="geo-inspector"]) .case-thesis {
  max-width: 18ch;
  color: var(--ink);
  font-family: var(--title-font);
  font-size: clamp(2.2rem, 4.3vw, 4.7rem);
  font-weight: 430;
  font-stretch: 104%;
  line-height: 0.92;
  letter-spacing: -0.055em;
}

body.editorial-case:not([data-page="geo-inspector"]) .case-device {
  border: 1px solid var(--line-strong);
  border-radius: 0;
  box-shadow: 18px 18px 0 color-mix(in srgb, var(--signal), transparent 84%);
  transform: translate3d(0, calc((0.5 - var(--signal-page-progress)) * 3vw), 0);
}

body.editorial-case:not([data-page="geo-inspector"]) .case-section {
  --case-progress: 0.5;
  position: relative;
  width: min(100%, var(--content));
  padding: clamp(150px, 18vh, 210px) var(--gutter) 0;
}

body.editorial-case:not([data-page="geo-inspector"]) .case-section::before {
  position: absolute;
  top: clamp(110px, 13vh, 150px);
  right: var(--gutter);
  left: var(--gutter);
  height: 1px;
  background: var(--line);
  content: "";
}

body.editorial-case:not([data-page="geo-inspector"]) .case-section::after {
  position: absolute;
  top: calc(clamp(110px, 13vh, 150px) - 4px);
  left: calc(var(--gutter) + var(--case-progress) * (100% - var(--gutter) * 2 - 9px));
  width: 9px;
  height: 9px;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 1px var(--signal);
  content: "";
}

body.editorial-case:not([data-page="geo-inspector"]) :is(.section-lock, .section-intro) h2,
body.editorial-case:not([data-page="geo-inspector"]) .next-steps > h2 {
  color: var(--ink);
  font-family: var(--title-font);
  font-size: clamp(3.8rem, 6.5vw, 7rem);
  font-weight: 510;
  font-stretch: 112%;
  line-height: 0.84;
  letter-spacing: -0.068em;
}

body.editorial-case:not([data-page="geo-inspector"]) .kicker {
  color: var(--signal-deep);
  font-stretch: 76%;
  font-weight: 650;
  letter-spacing: 0.045em;
}

body.editorial-case:not([data-page="geo-inspector"]) :is(.case-copy, .section-intro) > p {
  font-stretch: 95%;
  line-height: 1.45;
}

body.editorial-case:not([data-page="geo-inspector"]) :is(.evidence-grid, .product-grid) article,
body.editorial-case:not([data-page="geo-inspector"]) .roadmap article {
  border-radius: 0;
  transform: translate3d(0, calc((1 - var(--case-progress)) * 42px), 0);
}

body.editorial-case:not([data-page="geo-inspector"]) .product-card h3 {
  font-family: var(--title-font);
  font-size: clamp(2rem, 3.1vw, 3.5rem);
  font-weight: 520;
  font-stretch: 110%;
  line-height: 0.9;
  letter-spacing: -0.055em;
}

body.editorial-case:not([data-page="geo-inspector"]) .score-row {
  position: relative;
  overflow: hidden;
}

body.editorial-case:not([data-page="geo-inspector"]) .score-row::before {
  position: absolute;
  inset: auto 0 0;
  width: calc(var(--case-progress) * 100%);
  height: 2px;
  background: var(--signal);
  content: "";
}

body.editorial-case:not([data-page="geo-inspector"]) .score-row span {
  font-family: var(--title-font);
  font-weight: 500;
  font-stretch: 104%;
  letter-spacing: -0.04em;
}

body.editorial-case:not([data-page="geo-inspector"]) .score-row b,
body.editorial-case:not([data-page="geo-inspector"]) .flow div {
  font-stretch: 78%;
  font-weight: 650;
}

body.editorial-case:not([data-page="geo-inspector"]) .screen-grid figure {
  border: 1px solid var(--line-strong);
  border-radius: 0;
  box-shadow: 10px 10px 0 color-mix(in srgb, var(--signal), transparent 90%);
}

body.editorial-case:not([data-page="geo-inspector"]) .screen-grid figure:nth-child(odd) {
  transform: translate3d(0, calc((0.5 - var(--case-progress)) * 5vw), 0);
}

body.editorial-case:not([data-page="geo-inspector"]) .screen-grid figure:nth-child(even) {
  transform: translate3d(0, calc((var(--case-progress) - 0.5) * 5vw), 0);
}

body.editorial-case:not([data-page="geo-inspector"]) .screenshot-figure figcaption,
body.editorial-case:not([data-page="geo-inspector"]) .role-list,
body.editorial-case:not([data-page="geo-inspector"]) .role-list li {
  background: var(--paper);
}

body.editorial-case:not([data-page="geo-inspector"]) .roadmap article {
  border: 1px solid var(--line);
  box-shadow: 8px 8px 0 color-mix(in srgb, var(--signal), transparent 90%);
}

body.editorial-case:not([data-page="geo-inspector"]) .roadmap p {
  font-family: var(--title-font);
  font-weight: 480;
  font-stretch: 103%;
  letter-spacing: -0.04em;
}

body.editorial-case:not([data-page="geo-inspector"]).editorial-case .case-section-nav :is(a, a::after, button) {
  font-family: var(--body-font);
}

/* Gallery — the visual archive becomes a changing contact sheet */

body[data-page="gallery"] .gallery-hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  padding-top: clamp(145px, 18vh, 190px);
  overflow: hidden;
}

body[data-page="gallery"] .gallery-hero::before {
  position: absolute;
  z-index: -1;
  right: -10vw;
  bottom: -26vw;
  width: 68vw;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 128, 94, 0.34);
  border-radius: 50%;
  box-shadow: 0 0 0 9vw rgba(255, 128, 94, 0.05), 0 0 0 18vw rgba(255, 128, 94, 0.025);
  content: "";
}

body[data-page="gallery"] .gallery-kicker {
  font-stretch: 76%;
  font-weight: 650;
  letter-spacing: 0.045em;
}

body[data-page="gallery"] .gallery-title {
  max-width: 8ch;
  font-family: var(--title-font);
  font-size: clamp(7rem, 11.5vw, 12rem);
  font-weight: 580;
  font-stretch: 118%;
  line-height: 0.68;
  letter-spacing: -0.085em;
  overflow-wrap: normal;
  word-break: normal;
}

body[data-page="gallery"] .gallery-subtitle {
  max-width: 40ch;
  font-size: clamp(1.25rem, 1.75vw, 1.65rem);
  font-stretch: 96%;
  line-height: 1.4;
}

body[data-page="gallery"] .gallery-stats {
  border-color: var(--line-strong);
}

body[data-page="gallery"] .gallery-stats div {
  min-height: 118px;
  transition: color 260ms ease, background-color 260ms ease;
}

body[data-page="gallery"] .gallery-stats div:hover {
  background: var(--signal);
}

body[data-page="gallery"] .gallery-stats strong {
  font-size: 1rem;
  font-stretch: 112%;
}

body[data-page="gallery"] .gallery-stats span,
body[data-page="gallery"] .gallery-item figcaption {
  font-stretch: 79%;
  letter-spacing: 0.035em;
}

body[data-page="gallery"] .gallery-grid {
  columns: 3;
  column-gap: clamp(18px, 2vw, 34px);
}

body[data-page="gallery"] .gallery-item {
  --gallery-progress: 0.5;
  margin-bottom: clamp(46px, 6vw, 90px);
  transform: translate3d(0, calc((0.5 - var(--gallery-progress)) * 5vw), 0);
}

body[data-page="gallery"] .gallery-image-wrap {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  box-shadow: 10px 10px 0 rgba(255, 128, 94, 0.09);
}

body[data-page="gallery"] .gallery-image-wrap::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: radial-gradient(280px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), transparent, rgba(17, 18, 15, 0.18));
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}

body[data-page="gallery"] .gallery-item:hover .gallery-image-wrap::after { opacity: 1; }

body[data-page="gallery"] .gallery-item img {
  transform: scale(calc(1.06 - var(--gallery-progress) * 0.04));
}

body[data-page="gallery"] .gallery-item figcaption strong {
  font-size: 0.92rem;
  font-stretch: 96%;
}

@media (max-width: 1000px) {
  body[data-page="home"] .project {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-bottom: 150px;
  }

  body[data-page="home"] .project-media-link,
  body[data-page="home"] .project-story {
    grid-column: 1;
    position: relative;
    top: auto;
  }

  body[data-page="home"] .project-media-link { grid-row: 2; }
  body[data-page="home"] .project-story { grid-row: 3; }

  body.editorial-case:not([data-page="geo-inspector"]) .case-title {
    font-size: clamp(5rem, 13vw, 9rem);
  }

  body[data-page="gallery"] .gallery-grid { columns: 2; }
}

@media (max-width: 760px) {
  body[data-page="home"] .hero {
    min-height: auto;
    padding: 112px 18px 74px;
  }

  body[data-page="home"] .hero-copy {
    margin-top: 70px;
  }

  body[data-page="home"] .hero h1 {
    font-size: clamp(3.75rem, 17vw, 5.6rem);
    line-height: 0.83;
  }

  body[data-page="home"] .hero-intro {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 44px;
  }

  body[data-page="home"] .hero-stage {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 26px;
    margin-top: 76px;
  }

  body[data-page="home"] .stage-note,
  body[data-page="home"] .clarity-field {
    position: relative;
    top: auto;
  }

  body[data-page="home"] .clarity-field {
    min-height: 520px;
  }

  body[data-page="home"] .field-body {
    grid-template-columns: 1fr 44px;
  }

  body[data-page="home"] .field-order {
    position: absolute;
    inset: 52% 18px 18px 28%;
    z-index: 3;
    padding: 24px;
    background: rgba(12, 14, 12, 0.94);
    border: 1px solid rgba(139, 237, 113, 0.3);
  }

  body[data-page="home"] .order-score { font-size: 5rem; }

  body[data-page="home"] .proof,
  body[data-page="home"] .work-section,
  body[data-page="home"] .about-section {
    padding-right: 18px;
    padding-left: 18px;
  }

  body[data-page="home"] .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  body[data-page="home"] .metric {
    min-height: 190px;
    padding: 24px 14px 18px;
    border-bottom: 1px solid var(--line);
  }

  body[data-page="home"] .metric strong { font-size: 4rem; }

  body[data-page="home"] .section-heading {
    display: block;
    margin-bottom: 90px;
  }

  body[data-page="home"] .section-heading h2,
  body[data-page="home"] .about-head h2 {
    font-size: clamp(4.1rem, 19vw, 6rem);
  }

  body[data-page="home"] .section-heading > p { margin-top: 38px; }

  body[data-page="home"] .project-meta {
    top: 64px;
    grid-template-columns: 42px 1fr;
  }

  body[data-page="home"] .project-meta span:last-child { display: none; }

  body[data-page="home"] .project-media {
    aspect-ratio: 4 / 3;
    box-shadow: 9px 9px 0 color-mix(in srgb, var(--project-accent), transparent 82%);
  }

  body[data-page="home"] .project-story h3 {
    font-size: clamp(3.2rem, 15vw, 4.7rem);
  }

  body[data-page="home"] .approach-section {
    padding-right: 18px;
    padding-left: 18px;
  }

  body[data-page="home"] .approach-intro h2 {
    font-size: clamp(4.2rem, 19vw, 6.2rem);
  }

  body.editorial-site .contact-link > span:first-child {
    font-size: clamp(5rem, 23vw, 7.6rem);
  }

  body.editorial-case:not([data-page="geo-inspector"]) .case-hero {
    width: 100%;
    min-height: auto;
    padding: 112px 18px 74px;
  }

  body.editorial-case:not([data-page="geo-inspector"]) .case-title {
    font-size: clamp(3.8rem, 17vw, 6rem);
    line-height: 0.8;
    overflow-wrap: normal;
  }

  body.editorial-case:not([data-page="geo-inspector"]) .case-title span:last-child {
    margin-left: 0;
    font-stretch: 108%;
  }

  body.editorial-case:not([data-page="geo-inspector"]) .case-thesis {
    font-size: clamp(2.1rem, 10vw, 3.2rem);
  }

  body.editorial-case:not([data-page="geo-inspector"]) .case-section {
    width: 100%;
    padding-right: 18px;
    padding-left: 18px;
  }

  body.editorial-case:not([data-page="geo-inspector"]) :is(.section-lock, .section-intro) h2,
  body.editorial-case:not([data-page="geo-inspector"]) .next-steps > h2 {
    font-size: clamp(3.1rem, 13vw, 4.8rem);
  }

  body.editorial-case:not([data-page="geo-inspector"]) .case-section::before {
    right: 18px;
    left: 18px;
  }

  body.editorial-case:not([data-page="geo-inspector"]) .case-section::after {
    left: calc(18px + var(--case-progress) * (100% - 45px));
  }

  body[data-page="gallery"] .gallery-hero {
    display: block;
    min-height: auto;
    padding: 120px 18px 96px;
  }

  body[data-page="gallery"] .gallery-title {
    max-width: none;
    font-size: clamp(4.8rem, 18vw, 6.2rem);
    line-height: 0.72;
    overflow-wrap: normal;
  }

  body[data-page="gallery"] .gallery-stats {
    margin-top: 72px;
  }

  body[data-page="gallery"] .gallery-section {
    padding-right: 18px;
    padding-left: 18px;
  }

  body[data-page="gallery"] .gallery-grid { columns: 1; }
  body[data-page="gallery"] .gallery-item { transform: none; }

  body[data-page="geo-inspector"] .case-title {
    font-size: clamp(3.85rem, 18.5vw, 5.8rem);
  }

  body[data-page="geo-inspector"] .case-title span:last-child {
    font-stretch: 98%;
    letter-spacing: -0.075em;
  }

  body.editorial-case .case-work-footer .footer-projects {
    max-width: 100vw;
    overflow-x: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] :is(.hero-line > span, .hero-intro, .field-noise, .field-axis, .field-order, .project-media img),
  body.editorial-case:not([data-page="geo-inspector"]) :is(.case-device, .evidence-grid article, .product-grid article, .roadmap article, .screen-grid figure),
  body[data-page="gallery"] :is(.gallery-item, .gallery-item img) {
    transform: none !important;
  }
}