/* ============================================================
   Home proof scenes — typographic transformation system
   The copy, grid and motion share one idea: problem becomes proof.
   ============================================================ */

.tab-visual-item:has([data-proof-scene]),
.tab-visual-item:has([data-strategy-loop]),
.tab-visual-item:has([data-execution-loop]) {
  inset: 0;
  display: block;
  width: 100%;
}

/* Rendered 1080×1152 to match the slot's 704×750 desktop ratio; cover handles the mobile strip. */
.strategy-loop,
.execution-loop {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #050505;
  border: 1px solid rgba(239, 238, 236, 0.11);
  border-radius: 0.28em;
}

.tribal-strategy-motion {
  position: relative;
  isolation: isolate;
}

.tribal-strategy-motion > .tribal-strategy-motion-image,
.tribal-strategy-motion > .ss-stage {
  display: none !important;
}

.proof-scene {
  --proof-orange: #dc3b02;
  --proof-paper: #efeeec;
  --proof-ink: #050505;
  position: absolute;
  inset: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: var(--proof-paper);
  background: var(--proof-ink);
  border: 1px solid rgba(239, 238, 236, 0.11);
  border-radius: 0.28em;
  container-type: inline-size;
  isolation: isolate;
  contain: layout paint;
  font-family: "PP Neue Montreal", Arial, sans-serif;
  cursor: default;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.proof-scene::before,
.proof-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.proof-scene::before {
  background:
    linear-gradient(90deg, transparent calc(25% - 0.5px), rgba(239, 238, 236, 0.045) 25%, transparent calc(25% + 0.5px)),
    linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(239, 238, 236, 0.045) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(90deg, transparent calc(75% - 0.5px), rgba(239, 238, 236, 0.045) 75%, transparent calc(75% + 0.5px));
}

.proof-scene::after {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.012),
    inset 0 -16cqw 24cqw rgba(0, 0, 0, 0.32);
}

.proof-scene__webgl,
.proof-scene__paper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.proof-scene__webgl {
  z-index: 0;
  opacity: 0.82;
}

.proof-scene__paper {
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  background-size: 14em 14em;
  mix-blend-mode: soft-light;
  opacity: 0.15;
}

.proof-scene__field {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.proof-scene__meta {
  position: absolute;
  top: 3.8cqw;
  right: 4.8cqw;
  left: 4.8cqw;
  display: flex;
  justify-content: space-between;
  padding-bottom: 1.65cqw;
  border-bottom: 1px solid rgba(239, 238, 236, 0.16);
  font-family: "RM Mono", monospace;
  font-size: clamp(0.5rem, 1.12cqw, 0.72rem);
  line-height: 1;
  letter-spacing: 0.1em;
  color: rgba(239, 238, 236, 0.54);
}

.proof-type-stage {
  position: absolute;
  top: 19%;
  right: 4.8cqw;
  left: 4.8cqw;
  height: 54%;
}

.proof-type-stage__kicker {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  font-family: "RM Mono", monospace;
  font-size: clamp(0.52rem, 1.25cqw, 0.78rem);
  line-height: 1;
  letter-spacing: 0.16em;
  color: rgba(239, 238, 236, 0.62);
}

.proof-type-stage__kicker::before {
  content: "";
  display: inline-block;
  width: 1.9em;
  height: 1px;
  margin: 0 0.85em 0.24em 0;
  background: var(--proof-orange);
}

.proof-type-pair {
  position: absolute;
  top: 15%;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(var(--letter-count), minmax(0, 1fr));
  height: 54%;
  overflow: hidden;
  border-top: 1px solid rgba(239, 238, 236, 0.13);
  border-bottom: 1px solid rgba(239, 238, 236, 0.13);
  font-size: 23.5cqw;
  line-height: 0.72;
  letter-spacing: -0.055em;
  font-feature-settings: "kern" 1, "liga" 0;
}

.proof-scene--execution .proof-type-pair {
  font-size: 16.1cqw;
}

.proof-scene--partnership .proof-type-pair {
  font-size: 15.8cqw;
}

.proof-type__cell {
  position: relative;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border-left: 1px solid rgba(239, 238, 236, 0.075);
}

.proof-type__cell:last-of-type {
  border-right: 1px solid rgba(239, 238, 236, 0.075);
}

.proof-type__letter {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 0.03em;
  white-space: nowrap;
  will-change: transform, opacity;
}

.proof-type__letter--problem {
  color: rgba(239, 238, 236, 0.11);
  font-weight: 400;
  -webkit-text-stroke: max(1px, 0.12cqw) rgba(239, 238, 236, 0.72);
}

.proof-type__letter--outcome {
  color: var(--proof-paper);
  font-weight: 600;
  opacity: 0;
}

.proof-type__cut {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: 0;
  z-index: 5;
  width: 1px;
  background: var(--proof-orange);
  box-shadow: 0 0 0 1px rgba(220, 59, 2, 0.08);
  transform: translateX(-0.5px);
  will-change: left, opacity;
}

.proof-type__cut::before,
.proof-type__cut::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 0.48em;
  height: 0.48em;
  border: 1px solid var(--proof-orange);
  background: var(--proof-ink);
  transform: translateX(-50%) rotate(45deg);
}

.proof-type__cut::before {
  top: -0.25em;
}

.proof-type__cut::after {
  bottom: -0.25em;
}

.proof-type__seam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc((4 / 7) * 100%);
  z-index: 4;
  width: 1px;
  background: rgba(239, 238, 236, 0.48);
  transform-origin: 50% 50%;
}

.proof-type__seam::before {
  content: "DESIGN / BUILD";
  position: absolute;
  top: 50%;
  left: 0;
  padding: 0.6em 0.75em;
  background: var(--proof-ink);
  color: rgba(239, 238, 236, 0.46);
  font-family: "RM Mono", monospace;
  font-size: clamp(0.38rem, 0.82cqw, 0.56rem);
  letter-spacing: 0.11em;
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-90deg);
}

.proof-type-caption {
  position: absolute;
  right: 0;
  bottom: 3%;
  left: 0;
  height: 1.3em;
  overflow: hidden;
  font-family: "RM Mono", monospace;
  font-size: clamp(0.52rem, 1.25cqw, 0.78rem);
  line-height: 1.3;
  letter-spacing: 0.12em;
}

.proof-type-caption span {
  position: absolute;
  inset: 0 auto auto 0;
  display: block;
  will-change: transform, opacity;
}

.proof-type-caption [data-caption-problem] {
  color: rgba(239, 238, 236, 0.44);
}

.proof-type-caption [data-caption-outcome] {
  color: var(--proof-paper);
  opacity: 0;
}

.proof-type-caption [data-caption-outcome]::before {
  content: "→";
  margin-right: 0.85em;
  color: var(--proof-orange);
}

.proof-scene__footer {
  position: absolute;
  right: 4.8cqw;
  bottom: 5.5%;
  left: 4.8cqw;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: end;
  gap: 4cqw;
  padding-top: 2.1cqw;
  border-top: 1px solid rgba(239, 238, 236, 0.16);
}

.proof-scene__statement {
  max-width: 19em;
  margin: 0;
  color: var(--proof-paper);
  font-size: clamp(0.95rem, 2.65cqw, 1.5rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.proof-scene__statement span {
  color: var(--proof-orange);
}

.proof-scene__tags {
  display: grid;
  gap: 0.7em;
  justify-items: end;
  margin-bottom: 6.5cqw;
  font-family: "RM Mono", monospace;
  font-size: clamp(0.43rem, 0.98cqw, 0.64rem);
  line-height: 1;
  letter-spacing: 0.1em;
  color: rgba(239, 238, 236, 0.48);
}

.proof-scene__tags span::before {
  content: "";
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  margin-right: 0.85em;
  border: 1px solid currentColor;
  border-radius: 50%;
  vertical-align: 0.08em;
}

.proof-scene__tags span:last-child {
  color: var(--proof-orange);
}

.proof-scene__compare {
  position: absolute;
  right: 4.8cqw;
  bottom: 2.1%;
  font-family: "RM Mono", monospace;
  font-size: clamp(0.38rem, 0.82cqw, 0.54rem);
  letter-spacing: 0.1em;
  color: rgba(239, 238, 236, 0.28);
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .proof-scene {
    cursor: ew-resize;
  }
}

@media screen and (max-width: 767px) {
  .proof-scene__meta {
    top: 4.4cqw;
  }

  .proof-type-stage {
    top: 18%;
    height: 56%;
  }

  .proof-type-pair {
    top: 17%;
    height: 51%;
  }

  .proof-scene__footer {
    bottom: 5%;
  }
}

@media screen and (max-width: 479px) {
  .proof-scene {
    border-radius: 0.18em;
  }

  .proof-scene__meta {
    top: 5.4cqw;
    right: 5.4cqw;
    left: 5.4cqw;
    padding-bottom: 2.5cqw;
    font-size: 0.43rem;
  }

  .proof-scene__meta span:last-child {
    max-width: 16em;
    text-align: right;
  }

  .proof-type-stage {
    top: 20%;
    right: 5.4cqw;
    left: 5.4cqw;
    height: 50%;
  }

  .proof-type-stage__kicker,
  .proof-type-caption {
    font-size: 0.44rem;
  }

  .proof-type-pair {
    top: 18%;
    height: 50%;
  }

  .proof-scene__footer {
    right: 5.4cqw;
    bottom: 6%;
    left: 5.4cqw;
    grid-template-columns: 1fr;
    gap: 4.2cqw;
    padding-top: 3.2cqw;
  }

  .proof-scene__statement {
    max-width: 15em;
    font-size: 0.96rem;
  }

  .proof-scene__tags {
    grid-template-columns: repeat(3, auto);
    gap: 2.6cqw;
    justify-items: start;
    margin-bottom: 0;
    font-size: 0.36rem;
  }

  .proof-scene__tags span::before {
    display: none;
  }

  .proof-scene__compare {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .proof-type__letter--problem,
  .proof-type-caption [data-caption-problem],
  .proof-type__cut,
  .proof-type__seam {
    opacity: 0 !important;
  }

  .proof-type__letter--outcome,
  .proof-type-caption [data-caption-outcome] {
    opacity: 1 !important;
    transform: none !important;
  }

  .proof-scene__meta,
  .proof-type-stage__kicker,
  .proof-scene__statement,
  .proof-scene__tags span {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}

/* Shorter desktop box pulls the bottom-anchored tab copy up toward the tabs. */
@media screen and (min-width: 992px) {
  .tab-visual-wrap:has([data-strategy-loop]) {
    height: 38.75em;
  }
}

/* Center tab labels on the cap height rather than the font's ascent/descent
   metrics; the padding returns the trimmed 0.31em so the pill keeps its size. */
@supports (text-box: trim-both cap alphabetic) {
  .filter-bar[data-tabs="nav"] .filter-button > .p-med {
    text-box: trim-both cap alphabetic;
    padding-block: 0.155em;
  }
}