/* ============================================================
   PROJECT PAGE · Touch The Wall
   Loaded after css/tokens.css + css/styles.css.
   Shared case-study layout lives in styles.css (.case-*).
   Add only Touch The Wall-specific overrides/accents below.
   ============================================================ */

/* Case name rendered as the title image instead of text */
.case--touchthewall .case-name {
  height: 48px;
  width: auto;
  align-self: flex-start;  /* opt out of the column-flex stretch that squashed the width */
  display: block;
}

/* ── Initial Observation: image 1 slides across to image 2 ──
   Two slides sit side-by-side on a 200%-wide track. The track's X offset is
   driven by scroll progress through the step (--tw-slide, set in JS): 0% at
   the top of the section → -50% at the bottom, so the image slides in step
   with the scroll. */
.case--touchthewall .tw-slider {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.case--touchthewall .tw-slider-track {
  display: flex;
  width: 200%;
  height: 100%;
  transform: translateX(var(--tw-slide, 0%));
  will-change: transform;
}
.case--touchthewall .tw-slide {
  flex: 0 0 50%;
  height: 100%;
}
.case--touchthewall .tw-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.015) translateZ(0);
  backface-visibility: hidden;
}

/* ── Painpoints: User Barrier → Product Direction matrix ──
   A two-column table: header row of labels, then one row per barrier.
   Rows are divided by hairline rules; the columns stay aligned via a
   shared grid template so long copy in either column wraps cleanly. */
.case--touchthewall .tw-matrix {
  margin-top: 40px;
  width: 100%;
}
.case--touchthewall .tw-matrix-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 40px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.case--touchthewall .tw-matrix-row:last-child {
  border-bottom: none;
}
.case--touchthewall .tw-matrix-cell {
  font-size: var(--body-2-size);
  line-height: var(--body-2-line);
  letter-spacing: var(--tracking);
  color: var(--text);
}
.case--touchthewall .tw-matrix-head {
  padding-top: 0;
}
.case--touchthewall .tw-matrix-head .tw-matrix-cell {
  font-weight: var(--weight-semibold);
}
/* The Product Direction column reads as the "answer" — keep it full-strength
   text; the barrier label leans slightly muted to separate problem vs. fix. */
.case--touchthewall .tw-matrix-barrier {
  color: var(--text-muted);
}

/* ── MVP: numbered feature list (headline + detail) ── */
.case--touchthewall .tw-features {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.case--touchthewall .tw-feature {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.case--touchthewall .tw-feature-title {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--title-3-size);
  line-height: var(--title-3-line);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-semibold);
  color: var(--text);
}
.case--touchthewall .tw-feature-num {     /* "01" index, baseline-aligned */
  flex: 0 0 auto;
  font-size: var(--caption-1-size);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.case--touchthewall .tw-feature-text {    /* detail, indented under the headline */
  margin: 0;
  padding-left: 32px;
  font-size: var(--body-2-size);
  line-height: var(--body-2-line);
  letter-spacing: var(--tracking);
  color: var(--text-dim);
}