/* Global: padding counts inside declared sizes (sticky pins must be exactly one viewport tall) */
*, *::before, *::after { box-sizing: border-box; }

/* Scroll scrub layout (from the site engine) */
.scroll-scrub {
  --ss-progress: 0;
  position: relative;
  isolation: isolate;
  color: var(--ss-ink);
  background: var(--ss-bg);
}

.scroll-scrub__stage {
  position: sticky;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 100lvh;
  overflow: hidden;
  background: var(--ss-bg);
}

.scroll-scrub__media,
.scroll-scrub__layer,
.scroll-scrub__picture,
.scroll-scrub__poster,
.scroll-scrub__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scroll-scrub__media {
  z-index: 0;
}

.scroll-scrub__layer {
  margin: 0;
  overflow: hidden;
  opacity: 0;
  will-change: opacity;
}

.scroll-scrub__layer:first-child {
  opacity: 1;
}

.scroll-scrub__poster,
.scroll-scrub__video {
  display: block;
  object-fit: cover;
  object-position: var(--ss-object-position);
}

.scroll-scrub__poster {
  z-index: 0;
}

.scroll-scrub__video {
  z-index: 1;
}

.scroll-scrub__layer[data-video-painted="true"] .scroll-scrub__poster {
  visibility: hidden;
}

.scroll-scrub__progress {
  position: absolute;
  z-index: 5;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: color-mix(in srgb, var(--ss-ink) 14%, transparent);
  pointer-events: none;
}

.scroll-scrub__progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ss-accent);
  transform: scaleX(var(--ss-progress));
  transform-origin: left center;
}

.scroll-scrub__route {
  position: absolute;
  z-index: 6;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 4vw, 4rem);
  left: clamp(1rem, 4vw, 4rem);
  display: flex;
  justify-content: flex-end;
  gap: 0.25rem;
  pointer-events: auto;
}

.scroll-scrub__route-button {
  min-height: 2.75rem;
  padding: 0.65rem 0.9rem;
  border: 0;
  color: var(--ss-muted);
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.scroll-scrub__route-button:hover,
.scroll-scrub__route-button[aria-current="step"] {
  color: var(--ss-ink);
}

.scroll-scrub__route-button[aria-current="step"] {
  text-decoration: underline;
  text-decoration-color: var(--ss-accent);
  text-decoration-thickness: 0.15em;
  text-underline-offset: 0.3em;
}

.scroll-scrub__route-button:focus-visible {
  outline: 2px solid var(--ss-accent);
  outline-offset: 3px;
}

.scroll-scrub__story {
  position: relative;
  z-index: 3;
  margin-top: -100lvh;
  pointer-events: none;
}

.scroll-scrub__chapter,
.scroll-scrub__connector-band {
  position: relative;
}

.scroll-scrub__chapter-pin {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  min-height: 100lvh;
  padding: clamp(5rem, 9vw, 8rem) clamp(1.25rem, 6vw, 6rem);
  pointer-events: none;
}

.scroll-scrub__chapter[data-align="right"] .scroll-scrub__chapter-pin {
  justify-content: flex-end;
}

.scroll-scrub__copy {
  position: relative;
  width: min(40rem, 48vw);
  pointer-events: auto;
}

.scroll-scrub__copy::before {
  position: absolute;
  z-index: -1;
  inset: -3rem -5rem;
  content: "";
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--ss-bg) 88%, transparent) 0%,
    color-mix(in srgb, var(--ss-bg) 58%, transparent) 52%,
    transparent 76%
  );
  pointer-events: none;
}

.scroll-scrub__kicker {
  max-width: 30ch;
  margin: 0 0 1rem;
  color: var(--ss-accent);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.scroll-scrub__title {
  max-width: 13ch;
  margin: 0;
  color: var(--ss-ink);
  font: inherit;
  font-size: clamp(2.75rem, 6vw, 6.75rem);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.scroll-scrub__body {
  max-width: 42ch;
  margin: 1.5rem 0 0;
  color: var(--ss-muted);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.55;
}

.scroll-scrub__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.scroll-scrub__tags li {
  padding: 0.45rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--ss-ink) 20%, transparent);
  color: var(--ss-ink);
  font-size: 0.82rem;
}

.scroll-scrub__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

@media (max-width: 860px) {
  .scroll-scrub__poster,
  .scroll-scrub__video {
    object-position: var(--ss-mobile-position);
  }

  .scroll-scrub__route {
    right: max(0.75rem, env(safe-area-inset-right));
    left: max(0.75rem, env(safe-area-inset-left));
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }

  .scroll-scrub__route-button {
    flex: 0 0 auto;
  }

  .scroll-scrub__chapter-pin,
  .scroll-scrub__chapter[data-align="right"] .scroll-scrub__chapter-pin {
    align-items: flex-end;
    justify-content: flex-start;
    padding: 6.5rem max(1.25rem, env(safe-area-inset-right))
      calc(4rem + env(safe-area-inset-bottom))
      max(1.25rem, env(safe-area-inset-left));
  }

  .scroll-scrub__copy {
    width: min(100%, 36rem);
  }

  .scroll-scrub__copy::before {
    inset: -3rem -2rem;
    background: linear-gradient(
      to top,
      var(--ss-bg) 0%,
      color-mix(in srgb, var(--ss-bg) 82%, transparent) 58%,
      transparent 100%
    );
  }

  .scroll-scrub__title {
    max-width: 14ch;
    font-size: clamp(2.3rem, 11vw, 4.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-scrub__chapter {
    min-height: 100lvh !important;
  }

  .scroll-scrub__connector-band {
    display: none;
  }

  .scroll-scrub__progress span {
    transition: none;
  }
}

/* TE-EX site layer */
/* TE-EX site layer. Tokens from design-brief.md (Locked palette + type). */
:root {
  --tx-bg: #161514;
  --tx-surface: #242220;
  --tx-line: #3a3734;
  --tx-ink: #ece6dc;
  --tx-muted: #a39c91;
  --tx-accent: #c8bba6;
  --tx-display: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --tx-body: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --tx-gutter: clamp(1.25rem, 5vw, 5rem);
  --tx-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

html {
  scroll-behavior: smooth;
  background: var(--tx-bg);
}

body.tx-body {
  margin: 0;
  background: var(--tx-bg);
  color: var(--tx-ink);
  font-family: var(--tx-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

.tx-body a {
  color: inherit;
  text-decoration: none;
}

/* ---------- Journey type overrides ---------- */
.scroll-scrub {
  font-family: var(--tx-body);
}
.scroll-scrub__title {
  font-family: var(--tx-display);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1;
}
.scroll-scrub__kicker {
  font-family: var(--tx-body);
  font-weight: 400;
  letter-spacing: 0.24em;
  font-size: 0.72rem;
}
.scroll-scrub__tags li {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}
/* chapter route sits bottom-left so the site header owns the top edge */
.scroll-scrub__route {
  top: auto;
  bottom: clamp(1rem, 3vw, 2rem);
  justify-content: flex-start;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

/* ---------- Header ---------- */
.tx-header {
  position: fixed;
  z-index: 40;
  inset: 0 0 auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  padding: 0 var(--tx-gutter);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--tx-bg) 80%, transparent), transparent);
}
.tx-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.tx-brand__mark {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: invert(1) brightness(1.1);
  mix-blend-mode: screen;
}
.tx-brand__name {
  font-family: var(--tx-display);
  font-size: 1.15rem;
  letter-spacing: 0.14em;
}
.tx-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
  font-size: 0.85rem;
}
.tx-nav > a:not(.tx-cta-capsule) {
  color: var(--tx-muted);
  transition: color 0.3s;
}
.tx-nav > a:not(.tx-cta-capsule):hover {
  color: var(--tx-ink);
}

/* ---------- CTAs: one identity each ---------- */
.tx-arrow {
  transition: transform 0.35s var(--tx-ease);
}

.tx-cta-underline {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.4rem 0;
  font-size: 0.95rem;
  color: var(--tx-ink);
}
.tx-cta-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--tx-accent);
  transform: scaleX(0.35);
  transform-origin: left;
  transition: transform 0.45s var(--tx-ease);
}
.tx-cta-underline:hover::after {
  transform: scaleX(1);
}
.tx-cta-underline:hover .tx-arrow {
  transform: translateX(4px);
}

.tx-cta-solid {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.6rem;
  background: var(--tx-ink);
  color: var(--tx-bg) !important;
  font-weight: 500;
  font-size: 0.92rem;
  transition: transform 0.25s var(--tx-ease), background 0.3s;
}
.tx-cta-solid:hover {
  transform: translateY(-1px);
  background: #ffffff;
}
.tx-cta-solid:hover .tx-arrow {
  transform: translateX(5px);
}
.tx-cta-solid:active {
  transform: translateY(0) scale(0.98);
}

.tx-cta-capsule {
  padding: 0.55rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--tx-ink) 45%, transparent);
  border-radius: 999px;
  transition: background 0.3s, color 0.3s;
}
.tx-cta-capsule:hover {
  background: var(--tx-ink);
  color: var(--tx-bg);
}

.tx-cta-bracket {
  display: inline-flex;
  gap: 0.2rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--tx-accent);
}
.tx-cta-bracket::before,
.tx-cta-bracket::after {
  transition: transform 0.3s var(--tx-ease);
}
.tx-cta-bracket::before {
  content: "[";
}
.tx-cta-bracket::after {
  content: "]";
}
.tx-cta-bracket:hover::before {
  transform: translateX(-4px);
}
.tx-cta-bracket:hover::after {
  transform: translateX(4px);
}

.tx-cta-handle {
  display: inline-block;
  font-family: var(--tx-display);
  font-size: clamp(3rem, 11vw, 9rem);
  line-height: 1;
  letter-spacing: -0.04em;
  transition: color 0.35s;
}
.tx-cta-handle:hover {
  color: var(--tx-accent);
}

/* ---------- Material backdrop ----------
 * A sticky layer inside .tx-after: it holds still while the sections scroll
 * over it (works on iOS, unlike background-attachment: fixed) and never
 * leaks over the journey above because it lives inside the wrapper. */
.tx-after {
  position: relative;
  isolation: isolate;
  background: var(--tx-bg);
}
.tx-backdrop {
  position: sticky;
  top: 0;
  z-index: -1;
  height: 100lvh;
  margin-bottom: -100lvh;
  overflow: hidden;
  pointer-events: none;
}
.tx-backdrop picture,
.tx-backdrop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tx-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, var(--tx-bg) 0%, transparent 18%),
    color-mix(in srgb, var(--tx-bg) 78%, transparent);
}

/* ---------- Sections ---------- */
.tx-section {
  position: relative;
  padding: clamp(5rem, 11vw, 9rem) var(--tx-gutter);
  border-top: 1px solid var(--tx-line);
}
.tx-eyebrow {
  margin: 0 0 1.25rem;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tx-accent);
}
.tx-h2 {
  margin: 0;
  max-width: 18ch;
  font-family: var(--tx-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* Proyectos */
.tx-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 2.5rem 0 2.5rem;
}
.tx-chip {
  padding: 0.6rem 1rem;
  border: 1px solid var(--tx-line);
  background: transparent;
  color: var(--tx-muted);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.tx-chip:hover {
  color: var(--tx-ink);
  border-color: var(--tx-muted);
}
.tx-chip[aria-pressed="true"] {
  background: var(--tx-accent);
  border-color: var(--tx-accent);
  color: var(--tx-bg);
}
.tx-chip:focus-visible {
  outline: 2px solid var(--tx-accent);
  outline-offset: 2px;
}
.tx-masonry {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: clamp(9rem, 14vw, 13rem);
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tx-card {
  grid-column: span 2;
  grid-row: span 2;
  overflow: hidden;
  background: var(--tx-surface);
}
.tx-card--0 {
  grid-column: span 4;
  grid-row: span 3;
}
.tx-card--3 {
  grid-row: span 3;
}
.tx-card a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.tx-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--tx-ease);
}
.tx-card a:hover img {
  transform: scale(1.05);
}
.tx-card a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 9, 0.78), transparent 55%);
}
.tx-card__meta {
  position: absolute;
  z-index: 1;
  left: 1.1rem;
  right: 1.1rem;
  bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.tx-card__name {
  font-family: var(--tx-display);
  font-size: clamp(1.1rem, 1.7vw, 1.5rem);
}
.tx-card__place {
  font-size: 0.8rem;
  color: var(--tx-muted);
}

/* Estudio */
.tx-studio {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.tx-studio__img {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.tx-studio__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tx-studio__text p {
  max-width: 48ch;
  margin: 1.75rem 0 0;
  color: var(--tx-muted);
  line-height: 1.7;
}
.tx-facts {
  margin: 2.5rem 0 0;
  border-top: 1px solid var(--tx-line);
}
.tx-facts div {
  display: grid;
  grid-template-columns: 5rem 1fr;
  align-items: baseline;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--tx-line);
}
.tx-facts dt {
  font-family: var(--tx-display);
  font-size: 2rem;
}
.tx-facts dd {
  margin: 0;
  color: var(--tx-muted);
  font-size: 0.92rem;
}

/* Equipo */
.tx-team__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 5vw, 5rem);
  margin-top: 3rem;
}
.tx-person img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(0.3);
  transition: filter 0.6s;
}
.tx-person:hover img {
  filter: grayscale(0);
}
.tx-person--offset {
  margin-top: clamp(3rem, 10vw, 8rem);
}
.tx-person h3 {
  margin: 1.5rem 0 0.3rem;
  font-family: var(--tx-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
}
.tx-person__role {
  margin: 0 0 0.9rem;
  color: var(--tx-accent);
  font-size: 0.88rem;
}
.tx-person p:last-child {
  max-width: 44ch;
  margin: 0;
  color: var(--tx-muted);
  line-height: 1.65;
  font-size: 0.95rem;
}

/* Instagram: the one band where the materials read at full strength
   (.is-near is set by site.js shortly before it scrolls in, so the photo never
   competes with the film during a phone's first seconds) */
.tx-insta.is-near {
  background:
    linear-gradient(to bottom, rgba(22, 21, 20, 0.72), rgba(22, 21, 20, 0.35) 45%, rgba(22, 21, 20, 0.72)),
    url("assets/bg/materiales.jpg") center / cover no-repeat;
}
@media (max-width: 860px) {
  .tx-insta.is-near {
    background:
      linear-gradient(to bottom, rgba(22, 21, 20, 0.75), rgba(22, 21, 20, 0.4) 45%, rgba(22, 21, 20, 0.75)),
      url("assets/bg/materiales-mobile.jpg") center / cover no-repeat;
  }
}
.tx-insta .tx-h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  color: var(--tx-muted);
}
.tx-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(12rem, 22vw, 20rem);
  gap: 0.75rem;
  margin: 3rem calc(var(--tx-gutter) * -1) 0;
  padding: 0 var(--tx-gutter) 0.5rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.tx-strip li {
  scroll-snap-align: start;
  aspect-ratio: 1;
  overflow: hidden;
}
.tx-strip a,
.tx-strip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tx-strip img {
  transition: transform 0.9s var(--tx-ease);
}
.tx-strip a:hover img {
  transform: scale(1.06);
}

/* Contacto */
.tx-rows {
  margin: 3rem 0 2.5rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--tx-line);
  max-width: 52rem;
}
.tx-rows li {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: 1.3rem 0;
  border-bottom: 1px solid var(--tx-line);
}
.tx-rows span {
  color: var(--tx-muted);
  font-size: 0.85rem;
}
.tx-rows a,
.tx-rows strong {
  font-family: var(--tx-display);
  font-weight: 400;
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  transition: color 0.3s;
}
.tx-rows a:hover {
  color: var(--tx-accent);
}
.tx-careers {
  max-width: 34rem;
  margin-top: 4rem;
  padding: 1.75rem;
  background: color-mix(in srgb, var(--tx-surface) 82%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--tx-line);
}
.tx-careers h3 {
  margin: 0 0 0.5rem;
  font-family: var(--tx-display);
  font-weight: 400;
  font-size: 1.4rem;
}
.tx-careers p {
  margin: 0 0 1rem;
  color: var(--tx-muted);
  font-size: 0.92rem;
}

.tx-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding: 2rem var(--tx-gutter);
  border-top: 1px solid var(--tx-line);
  color: var(--tx-muted);
  font-size: 0.8rem;
}

/* ---------- Mobile collapse (declared per section) ---------- */
@media (max-width: 860px) {
  .tx-header {
    height: 64px;
  }
  .tx-nav > a:not(.tx-cta-capsule) {
    display: none;
  }
  .tx-masonry {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 11rem;
  }
  .tx-card,
  .tx-card--3 {
    grid-column: span 1;
    grid-row: span 2;
  }
  .tx-card--0 {
    grid-column: span 2;
    grid-row: span 2;
  }
  .tx-studio {
    grid-template-columns: 1fr;
  }
  .tx-studio__img {
    aspect-ratio: 4 / 3;
  }
  .tx-team__grid {
    grid-template-columns: 1fr;
  }
  .tx-person--offset {
    margin-top: 0;
  }
  .tx-rows li {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .tx-body *,
  .tx-body *::before,
  .tx-body *::after {
    transition: none !important;
  }
}

/* ---------- Mobile fixes: chapter route clearance + soft copy scrim ---------- */
@media (max-width: 860px) {
  .scroll-scrub__chapter-pin,
  .scroll-scrub__chapter[data-align="right"] .scroll-scrub__chapter-pin {
    padding-bottom: calc(6.5rem + env(safe-area-inset-bottom));
  }
  .scroll-scrub__copy::before {
    inset: -5rem -2rem -4rem;
    background: linear-gradient(
      to top,
      transparent 0%,
      color-mix(in srgb, var(--ss-bg) 82%, transparent) 16%,
      color-mix(in srgb, var(--ss-bg) 74%, transparent) 62%,
      transparent 100%
    );
  }
  .scroll-scrub__body {
    font-size: 0.98rem;
  }
}

/* =================== Project pages =================== */
.tx-arrow--back { transform: none; }
.px-hero {
  position: relative;
  height: 88lvh;
  min-height: 520px;
  overflow: hidden;
  background: var(--tx-bg);
}
.px-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: px-settle 1.6s var(--tx-ease) both;
}
@keyframes px-settle { from { transform: scale(1.06); } to { transform: scale(1); } }
.px-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(22, 21, 20, 0.55), transparent 28%),
    linear-gradient(to top, var(--tx-bg) 0%, rgba(22, 21, 20, 0.6) 30%, transparent 62%);
}
.px-hero__copy {
  position: absolute;
  z-index: 1;
  left: var(--tx-gutter);
  right: var(--tx-gutter);
  bottom: clamp(2.5rem, 7vw, 5rem);
}
.px-back {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.75rem;
  font-size: 0.85rem;
  color: var(--tx-muted);
  transition: color 0.3s, gap 0.3s var(--tx-ease);
}
.px-back:hover { color: var(--tx-ink); gap: 0.9rem; }
.px-hero__cat {
  margin: 0 0 0.9rem;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tx-accent);
}
.px-hero__title {
  margin: 0;
  max-width: 16ch;
  font-family: var(--tx-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 6rem);
  line-height: 1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.px-info {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: start;
  border-top: 0;
}
.px-info__text p {
  max-width: 56ch;
  margin: 0 0 1.4rem;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.7;
  color: var(--tx-ink);
}
.px-info__text p + p { color: var(--tx-muted); font-size: 1rem; }
.px-facts { margin: 0; }
.px-facts li { grid-template-columns: 7.5rem 1fr; }
.px-facts strong {
  font-family: var(--tx-body);
  font-weight: 400;
  font-size: 0.98rem;
  line-height: 1.5;
}

.px-gallery { padding-top: 0; border-top: 0; }
.px-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: clamp(10rem, 16vw, 15rem);
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.px-shot { grid-column: span 3; grid-row: span 2; overflow: hidden; background: var(--tx-surface); }
.px-shot--0 { grid-column: span 4; grid-row: span 3; }
.px-shot--1 { grid-column: span 2; grid-row: span 3; }
.px-shot--2 { grid-column: span 3; grid-row: span 2; }
.px-shot--3 { grid-column: span 3; grid-row: span 2; }
.px-shot__btn {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.px-shot__btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--tx-ease), filter 0.5s;
}
.px-shot__btn:hover img { transform: scale(1.04); }
.px-shot__btn:focus-visible { outline: 2px solid var(--tx-accent); outline-offset: 3px; }

.px-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  padding: 0 var(--tx-gutter) clamp(4rem, 8vw, 6rem);
}
.px-pager__link {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.35rem;
  min-height: clamp(12rem, 22vw, 18rem);
  padding: 1.5rem;
  overflow: hidden;
  isolation: isolate;
}
.px-pager__link--next { align-items: flex-end; text-align: right; }
.px-pager__link img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--tx-ease);
}
.px-pager__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(14, 13, 12, 0.85), rgba(14, 13, 12, 0.35));
  transition: background 0.4s;
}
.px-pager__link:hover img { transform: scale(1.05); }
.px-pager__link:hover::before { background: linear-gradient(to top, rgba(14, 13, 12, 0.75), rgba(14, 13, 12, 0.2)); }
.px-pager__label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: var(--tx-accent);
}
.px-pager__name {
  font-family: var(--tx-display);
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  letter-spacing: -0.02em;
}

.px-cta { text-align: left; }
.px-cta .tx-h2 { margin-bottom: 2rem; font-size: clamp(1.9rem, 4vw, 3.4rem); }

.px-lightbox {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 4rem 4.5rem;
  background: rgba(12, 11, 10, 0.94);
}
.px-lightbox[hidden] { display: none; }
.px-lightbox__img {
  max-width: 100%;
  max-height: calc(100svh - 8rem);
  object-fit: contain;
}
.px-lightbox__close,
.px-lightbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid color-mix(in srgb, var(--tx-ink) 30%, transparent);
  border-radius: 999px;
  background: rgba(22, 21, 20, 0.6);
  color: var(--tx-ink);
  font: inherit;
  font-size: 1.5rem;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.px-lightbox__close:hover,
.px-lightbox__nav:hover { background: var(--tx-ink); color: var(--tx-bg); }
.px-lightbox__close { top: 1rem; right: 1rem; }
.px-lightbox__nav--prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.px-lightbox__nav--next { right: 1rem; top: 50%; transform: translateY(-50%); }
.px-lightbox__count {
  position: absolute;
  bottom: 1.25rem;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: 0.82rem;
  color: var(--tx-muted);
}

@media (max-width: 860px) {
  .px-hero { height: 78lvh; min-height: 460px; }
  .px-info { grid-template-columns: 1fr; }
  .px-facts li { grid-template-columns: 1fr; }
  .px-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 9.5rem; }
  .px-shot, .px-shot--2, .px-shot--3 { grid-column: span 1; grid-row: span 2; }
  .px-shot--0, .px-shot--1 { grid-column: span 2; grid-row: span 2; }
  .px-pager { grid-template-columns: 1fr; }
  .px-pager__link--next { align-items: flex-start; text-align: left; }
  .px-lightbox { padding: 3.5rem 0.75rem; }
  .px-lightbox__nav { top: auto; bottom: 0.75rem; transform: none; }
  .px-lightbox__count { bottom: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .px-hero__img { animation: none; }
}
/* a photo left alone on its gallery row spans the full width */
.px-shot--0:last-child,
.px-shot--2:last-child { grid-column: 1 / -1; }

/* Studio photo: show the whole team shot uncropped (it is 3:2), so nobody is cut off */
.tx-studio__img,
.tx-studio__img img { aspect-ratio: 1920 / 1277; }
.tx-studio__img img { object-fit: cover; object-position: center; }
.tx-studio { align-items: center; }
@media (max-width: 860px) {
  .tx-studio__img { aspect-ratio: 1920 / 1277; }
}

/* =================== Project pages: motion =================== */
/* Walk-in hero: a tall scroll track with a sticky stage; scroll plays the film. */
.px-hero[data-video] { height: 230lvh; overflow: visible; }
.px-hero[data-video]::after { display: none; }
.px-hero__stage {
  position: relative;
  height: 100%;
  overflow: hidden;
}
.px-hero[data-video] .px-hero__stage { position: sticky; top: 0; height: 100lvh; }
.px-hero__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(22, 21, 20, 0.55), transparent 28%),
    linear-gradient(to top, var(--tx-bg) 0%, rgba(22, 21, 20, 0.55) 28%, transparent 60%);
}
.px-hero__media, .px-hero__media img, .px-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.px-hero__video { z-index: 1; }
.px-hero.is-painted .px-hero__media { visibility: hidden; }
.px-hero__shade {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--tx-bg);
  opacity: 0;
  pointer-events: none;
}
.px-hero__copy { z-index: 4; will-change: transform; }
.px-hero[data-video] .px-hero__img { animation: none; }

/* Entrance of the hero copy on load */
.px-js .px-hero__copy > * {
  animation: px-rise 1.1s var(--tx-ease) both;
}
.px-js .px-hero__copy > *:nth-child(2) { animation-delay: 0.12s; }
.px-js .px-hero__copy > *:nth-child(3) { animation-delay: 0.24s; }
@keyframes px-rise { from { transform: translateY(34px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Scroll reveals (only when JS is on, so content is never hidden without it) */
.px-js [data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s var(--tx-ease), transform 1.1s var(--tx-ease);
}
.px-js [data-reveal].is-in { opacity: 1; transform: none; }
.px-js .px-facts li { transition-delay: calc(var(--i, 0) * 90ms); }

/* Gallery: curtain wipe on entry + parallax (transform set by JS) */
.px-js .px-shot[data-reveal] {
  opacity: 1;
  transform: none;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.2s var(--tx-ease);
}
.px-js .px-shot[data-reveal].is-in { clip-path: inset(0 0 0 0); }
.px-shot__btn img { transition: filter 0.5s; will-change: transform; transform: scale(1.08); }
.px-shot__btn:hover img { transform: none; filter: brightness(1.08); }
.px-js .px-shot__btn:hover img { transform: inherit; }

/* Lightbox transitions */
.px-lightbox { opacity: 0; transition: opacity 0.28s ease; }
.px-lightbox.is-open { opacity: 1; }
.px-lightbox__img {
  opacity: 0;
  transform: translateX(calc(var(--px-dir, 0) * 40px)) scale(0.985);
  transition: opacity 0.35s ease, transform 0.45s var(--tx-ease);
}
.px-lightbox__img.is-shown { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .px-hero[data-video] { height: 200lvh; }
}
@media (prefers-reduced-motion: reduce) {
  .px-hero[data-video] { height: 88lvh; }
  .px-js [data-reveal], .px-js .px-shot[data-reveal] { opacity: 1; transform: none; clip-path: none; transition: none; }
  .px-js .px-hero__copy > * { animation: none; }
  .px-shot__btn img { transform: none; }
  .px-lightbox, .px-lightbox__img { transition: none; }
}

/* the stage gradient replaces the old hero gradient */
.px-hero::after { display: none; }


/* More motion: shorter walk-in track (each scroll step moves further) + zoom origin */
.px-hero[data-video] { height: 190lvh; }
.px-hero__media, .px-hero__video { transform-origin: 50% 55%; will-change: transform; }
@media (max-width: 860px) { .px-hero[data-video] { height: 170lvh; } }
@media (prefers-reduced-motion: reduce) { .px-hero[data-video] { height: 88lvh; } }

/* FIX: IntersectionObserver ignores elements whose own clip-path hides them fully,
   so the curtain now lives on the inner button and the <li> stays observable. */
.px-js .px-shot[data-reveal] { clip-path: none; transition: none; }
.px-js .px-shot[data-reveal] .px-shot__btn {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.2s var(--tx-ease);
}
.px-js .px-shot[data-reveal].is-in .px-shot__btn { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  .px-js .px-shot[data-reveal] .px-shot__btn { clip-path: none; transition: none; }
}

/* Mobile: keep bottom-anchored UI clear of the browser toolbar.
   (100lvh - 100svh) = the toolbar height while it is visible, 0 on desktop. */
.scroll-scrub__route { bottom: calc(clamp(1rem, 3vw, 2rem) + 100lvh - 100svh); }
@media (max-width: 860px) {
  .scroll-scrub__chapter-pin,
  .scroll-scrub__chapter[data-align="right"] .scroll-scrub__chapter-pin {
    padding-bottom: calc(6.5rem + env(safe-area-inset-bottom) + 100lvh - 100svh);
  }
}
.px-hero__copy { bottom: calc(clamp(2.5rem, 7vw, 5rem) + 100lvh - 100svh); }
/* stop the browser from re-anchoring scroll while sticky layers change */
html { overflow-anchor: none; }

/* Instagram strip: arrows + drag + progress for desktop */
.tx-strip-wrap { position: relative; }
.tx-strip { cursor: grab; user-select: none; }
.tx-strip.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.tx-strip.is-dragging a { pointer-events: none; }
.tx-strip img { -webkit-user-drag: none; }
.tx-strip-nav {
  position: absolute;
  top: calc(50% - 0.25rem);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid color-mix(in srgb, var(--tx-ink) 35%, transparent);
  border-radius: 999px;
  background: rgba(22, 21, 20, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--tx-ink);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 0.3s, color 0.3s, opacity 0.3s;
}
.tx-strip-nav:hover { background: var(--tx-ink); color: var(--tx-bg); }
.tx-strip-nav:focus-visible { outline: 2px solid var(--tx-accent); outline-offset: 3px; }
.tx-strip-nav:disabled { opacity: 0; pointer-events: none; }
.tx-strip-nav--prev { left: 0.25rem; }
.tx-strip-nav--next { right: 0.25rem; }
.tx-strip-wrap:not(.is-scrollable) .tx-strip-nav,
.tx-strip-wrap:not(.is-scrollable) .tx-strip-bar { display: none; }
.tx-strip-bar {
  height: 2px;
  margin-top: 1.25rem;
  background: color-mix(in srgb, var(--tx-ink) 16%, transparent);
  overflow: hidden;
}
.tx-strip-bar span {
  display: block;
  height: 100%;
  width: 30%;
  background: var(--tx-accent);
  transition: transform 0.15s linear;
}
@media (hover: none) and (pointer: coarse) {
  .tx-strip { cursor: auto; }
  .tx-strip-nav { display: none; }
}
.tx-strip-wrap { margin-top: 3rem; }
.tx-strip-wrap .tx-strip { margin-top: 0; }
.tx-strip-nav { top: calc(50% - 0.7rem); }

/* Touch devices: lighter paint while scrolling */
@media (hover: none) and (pointer: coarse) {
  .tx-careers, .tx-strip-nav { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tx-careers { background: var(--tx-surface); }
  .px-shot__btn img { transform: none !important; will-change: auto; }
  .tx-card img, .tx-strip img, .px-pager__link img { transition: none; }
  .scroll-scrub__copy::before { will-change: auto; }
}

/* chapter copy opacity is driven by JS (fadeCopies); keep it cheap */
.scroll-scrub__copy { will-change: opacity; }
/* stronger header backing on phones so the logo always reads over the film */
@media (max-width: 860px) {
  .tx-header { background: linear-gradient(to bottom, rgba(22, 21, 20, 0.92), rgba(22, 21, 20, 0.55) 70%, transparent); }
}

/* Brighter, livelier film: lighter scrims over the video */
.scroll-scrub__copy::before {
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--ss-bg) 72%, transparent) 0%,
    color-mix(in srgb, var(--ss-bg) 38%, transparent) 52%,
    transparent 76%
  );
}
@media (max-width: 860px) {
  .scroll-scrub__copy::before {
    background: linear-gradient(
      to top,
      transparent 0%,
      color-mix(in srgb, var(--ss-bg) 66%, transparent) 18%,
      color-mix(in srgb, var(--ss-bg) 42%, transparent) 62%,
      transparent 100%
    );
  }
}
.px-hero__stage::after {
  background:
    linear-gradient(to bottom, rgba(22, 21, 20, 0.38), transparent 22%),
    linear-gradient(to top, rgba(22, 21, 20, 0.92) 0%, rgba(22, 21, 20, 0.35) 26%, transparent 52%);
}

/* =================== Entrance on page load =================== */
.scroll-scrub__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background: #0d0c0b;
  pointer-events: none;
  animation: tx-lights-up 1.8s cubic-bezier(0.4, 0, 0.2, 1) 0.15s both;
}
@keyframes tx-lights-up { from { opacity: 1; } to { opacity: 0; } }
.tx-header { animation: tx-drop 1s var(--tx-ease) 0.9s both; }
@keyframes tx-drop { from { transform: translateY(-18px); opacity: 0; } to { transform: none; opacity: 1; } }
#entrada .scroll-scrub__copy > * { animation: tx-rise 1.1s var(--tx-ease) both; }
#entrada .scroll-scrub__copy > *:nth-child(1) { animation-delay: 1.05s; }
#entrada .scroll-scrub__copy > *:nth-child(2) { animation-delay: 1.2s; }
#entrada .scroll-scrub__copy > *:nth-child(3) { animation-delay: 1.38s; }
#entrada .scroll-scrub__copy > *:nth-child(4) { animation-delay: 1.56s; }
@keyframes tx-rise { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.px-page .tx-header { animation-delay: 0.2s; }
@media (prefers-reduced-motion: reduce) {
  .scroll-scrub__stage::after, .tx-header, #entrada .scroll-scrub__copy > * { animation: none; }
  .scroll-scrub__stage::after { opacity: 0; }
}

/* Which real TE-EX project is on screen in each journey chapter */
.tx-chapter-proj {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.1rem;
  padding: 0.45rem 0.8rem 0.45rem 0.7rem;
  border-left: 2px solid var(--tx-accent);
  background: color-mix(in srgb, var(--tx-bg) 55%, transparent);
  color: var(--tx-ink);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  transition: background 0.3s, gap 0.3s var(--tx-ease);
}
.tx-chapter-proj:hover { background: color-mix(in srgb, var(--tx-bg) 85%, transparent); gap: 0.85rem; }

/* Real (brighter) project footage behind the journey: keep copy legible */
.scroll-scrub__copy::before {
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--ss-bg) 84%, transparent) 0%,
    color-mix(in srgb, var(--ss-bg) 58%, transparent) 55%,
    transparent 78%
  );
}
.scroll-scrub__title, .scroll-scrub__kicker { text-shadow: 0 2px 24px rgba(10, 9, 8, 0.45); }
.scroll-scrub__body { color: var(--tx-ink); text-shadow: 0 1px 12px rgba(10, 9, 8, 0.7); }
@media (max-width: 860px) {
  .scroll-scrub__copy::before {
    inset: -6rem -2rem -5rem;
    background: linear-gradient(
      to top,
      transparent 0%,
      color-mix(in srgb, var(--ss-bg) 86%, transparent) 16%,
      color-mix(in srgb, var(--ss-bg) 66%, transparent) 60%,
      transparent 100%
    );
  }
}

/* Team portraits: always full color (no desaturated rest state) */
.tx-person img, .tx-person:hover img { filter: none; }

/* =================== Instagram strip: zoom button + viewer =================== */
.tx-strip li { position: relative; }
.tx-strip-multi {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: rgba(14, 13, 12, 0.72);
  color: var(--tx-ink);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.tx-strip-zoom {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid color-mix(in srgb, var(--tx-ink) 40%, transparent);
  border-radius: 999px;
  background: rgba(14, 13, 12, 0.72);
  color: var(--tx-ink);
  cursor: zoom-in;
  opacity: 0.85;
  transition: opacity 0.3s, background 0.3s, color 0.3s, transform 0.3s var(--tx-ease);
}
.tx-strip li:hover .tx-strip-zoom { opacity: 1; }
.tx-strip-zoom:hover { background: var(--tx-ink); color: var(--tx-bg); transform: scale(1.06); }
.tx-strip-zoom:focus-visible { outline: 2px solid var(--tx-accent); outline-offset: 2px; opacity: 1; }

.ig-lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  max-width: 100%;
  margin: 0;
}
.ig-lightbox .px-lightbox__img { max-height: calc(100svh - 11rem); }
.ig-lightbox__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 1.2rem;
  color: var(--tx-muted);
  font-size: 0.85rem;
}
.ig-lightbox__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border: 1px solid color-mix(in srgb, var(--tx-ink) 40%, transparent);
  border-radius: 999px;
  color: var(--tx-ink);
  transition: background 0.3s, color 0.3s;
}
.ig-lightbox__link:hover { background: var(--tx-ink); color: var(--tx-bg); }
.ig-lightbox .px-lightbox__count { bottom: 0.9rem; }
@media (max-width: 860px) {
  .ig-lightbox .px-lightbox__img { max-height: calc(100svh - 12rem); }
}

/* Mobile: the copy scrim must not extend past the screen edge (it made the whole
   page 12px wider on phones, so it wobbled sideways while swiping). */
@media (max-width: 860px) {
  .scroll-scrub__copy::before { left: -1.25rem; right: -1.25rem; }
}

/* The film fades in over its poster once a real frame has painted, so a late
   load never jumps; the poster is dropped only after the fade. */
.scroll-scrub__video { opacity: 0; transition: opacity 0.35s ease; }
.scroll-scrub__layer[data-video-painted="true"] .scroll-scrub__video { opacity: 1; }
.scroll-scrub__layer[data-video-painted="true"] .scroll-scrub__poster { transition: visibility 0s linear 0.4s; }