.tc-w-work {
  padding: 0;
  overflow: visible;
}

.tc-w-work__filters {
  display: flex;
  flex-wrap: wrap;
  /* work.html Category pills: gap-[16px], filters pb-[44px] pt-[4px] */
  gap: 16px;
  margin: 0 0 44px;
  padding-top: 4px;
  padding-left: max(48px, calc((100% - 1440px) / 2 + 48px));
  padding-right: max(48px, calc((100% - 1440px) / 2 + 48px));
}

.tc-w-work__filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border: 1px solid #262626;
  border-radius: 999px;
  background: transparent;
  color: #262626;
  font: inherit;
  /* work.html: 15px / 21px / tracking -0.45px / uppercase */
  font-size: 15px;
  line-height: 21px;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
  box-shadow: none;
  transform-origin: center;
  /* audited-pill.pill-filter */
  transition:
    transform 0.18s ease-out,
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}

.tc-w-work__filter:is(:hover, :focus-visible) {
  background: #262626;
  color: #fff9f5;
  /* Same fill as border — no visible ring on hover (audited-pill). */
  border-color: #262626;
  outline: none;
  box-shadow: none;
  transform: scale(1.05);
}

.tc-w-work__filter.is-on,
.tc-w-work__filter[aria-pressed="true"] {
  background: #262626;
  color: #fff9f5;
  border-color: #262626;
  transform: none;
}

body.tangerine-theme .elementor .tc-w-work .tc-w-work__filter {
  background: transparent;
  color: #262626;
  border-color: #262626;
  outline: none;
  box-shadow: none;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

body.tangerine-theme .elementor .tc-w-work .tc-w-work__filter:is(:hover, :focus-visible),
body.tangerine-theme .elementor .tc-w-work .tc-w-work__filter.is-on,
body.tangerine-theme .elementor .tc-w-work .tc-w-work__filter[aria-pressed="true"] {
  background: #262626;
  color: #fff9f5;
  border-color: #262626;
  outline: none;
  box-shadow: none;
}

body.tangerine-theme .elementor .tc-w-work .tc-w-work__filter:is(:hover, :focus-visible) {
  transform: scale(1.05);
}

body.tangerine-theme .elementor .tc-w-work .tc-w-work__filter.is-on,
body.tangerine-theme .elementor .tc-w-work .tc-w-work__filter[aria-pressed="true"] {
  transform: none;
}

.tc-w-work__track {
  position: relative;
  width: 100%;
  overflow: visible;
  overflow-anchor: none;
}

.tc-w-work__stack {
  position: relative;
  display: grid;
  gap: 0;
  width: 100%;
  overflow-anchor: none;
}

.tc-w-work__card {
  position: relative;
  display: block;
  width: 100%;
  min-height: 720px;
  text-decoration: none;
  overflow: hidden;
  overflow-anchor: none;
  color: #fff9f5;
  background: #c7c7c7;
  cursor: pointer;
}

.tc-w-work__card[hidden] {
  display: none !important;
}

.tc-w-work__media,
.tc-w-work__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #c7c7c7;
}

.tc-w-work__media img {
  transition: transform 0.6s ease;
}

.tc-w-work__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 50%, rgba(38, 38, 38, 0.7) 100%);
}

/* Grain strengthens only as each stacking card compresses (reference --stack-grain).
   Same noise, blend and filter as work.html .stack-card::after. */
.tc-w-work__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  filter: contrast(350%) brightness(105%);
  opacity: calc(max(var(--stack-grain, 0), var(--tc-grain-always, 0)) * var(--tc-grain-strength, 1));
}

.tc-w-work__copy {
  position: absolute;
  z-index: 2;
  left: max(48px, calc((100% - 1440px) / 2 + 48px));
  right: max(48px, calc((100% - 1440px) / 2 + 48px));
  bottom: 48px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  max-height: calc(100% - 24px);
  overflow: visible;
}

.tc-w-work__client {
  margin: 0;
  /* Open size and strip size come from Style. This is the fallback when those controls are empty. */
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-size: calc(var(--tc-work-client-open, 64px) - (var(--tc-work-client-open, 64px) - var(--tc-work-client-strip, 20px)) * var(--stack-grain, 0));
  transition: font-size 0.05s linear;
}

.tc-w-work__title {
  margin: 2px 0 0;
  transition: margin 0.05s linear;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

@media (min-width: 901px) {
  .tc-w-work__title {
    font-size: calc(var(--tc-work-title-open, 32px) - (var(--tc-work-title-open, 32px) - var(--tc-work-title-strip, 16px)) * var(--stack-grain, 0));
    line-height: 1.1;
  }
}

/* Collapsed desktop bar: project title sits on the same line as the client. */
.tc-w-work__card.is-collapsed .tc-w-work__copy > div {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
}

.tc-w-work__card.is-collapsed .tc-w-work__title {
  margin-top: 0;
}

.tc-w-work__view {
  display: none;
  margin: 4px 0 0;
  color: #fff9f5;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.tc-w-work__view .tc-btn-icon {
  vertical-align: middle;
}

/* Uploaded SVG icons keep their own fill / stroke; repaint them so the icon colour control applies. */
.tc-w-work__view .tc-btn-icon svg [fill]:not([fill="none"]) {
  fill: currentColor;
}

.tc-w-work__view .tc-btn-icon svg [stroke]:not([stroke="none"]) {
  stroke: currentColor;
}

.tc-w-work.has-stack .tc-w-work__card.is-visible .tc-w-work__copy {
  /* Keep strip copy inside the compressed panel (matches reference strip). */
  align-items: center;
}

.tc-w-work__pill {
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border: 1px solid #fff9f5;
  border-radius: 999px;
  background: transparent;
  color: #fff9f5;
  white-space: nowrap;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  outline: none;
  box-shadow: none;
  transform-origin: center;
  /* Reference Category tag = audited-pill.pill-standard */
  transition:
    transform 0.18s ease-out,
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}

/* Red fill + charcoal ink + scale — beats Elementor pill color */
body.tangerine-theme .elementor .tc-w-work .tc-w-work__pill:is(:hover, :focus-visible),
.tc-w-work__pill:is(:hover, :focus-visible) {
  background: #f44349;
  border-color: #f44349;
  color: #262626;
  transform: scale(1.05);
}

.tc-w-work__more {
  display: none !important;
}

.tc-w-work.has-stack .tc-w-work__track {
  overflow: visible;
}

.tc-w-work.has-stack .tc-w-work__stack {
  position: sticky;
  top: 0;
  display: block;
  width: 100%;
  overflow: clip;
}

.tc-w-work.has-stack .tc-w-work__card.is-visible {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 0;
  will-change: transform, height;
}

/* List layout (phones by default): same collapsing stack, moved by transforms only. Cards keep their own
   height; the stage stays open at the bottom so the cards under it are never cut off by the address bar.
   The next section is pulled up under the stage's empty lower part, so only the cards take taps. */
.tc-w-work.has-list-stack .tc-w-work__stack {
  position: sticky;
  top: 0;
  display: block;
  width: 100%;
  overflow: visible;
  pointer-events: none;
}

body .tc-w-work.has-list-stack .tc-w-work__card.is-visible {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  will-change: transform;
  pointer-events: auto;
}

/* More Work orbit sits under the stack via negative margin from JS.
   z-index 1 matches reference review-more so Client 06 is not covered early. */
body.tangerine-theme [data-tc-more-work] {
  position: relative;
  z-index: 1;
  overflow-anchor: none;
}

@media (max-width: 900px) {
  .tc-w-work__copy {
    left: 20px;
    right: 20px;
    bottom: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tc-w-work.has-stack .tc-w-work__track {
    height: auto;
  }

  .tc-w-work.has-stack .tc-w-work__stack {
    position: relative;
    height: auto;
    overflow: visible;
  }

  .tc-w-work.has-stack .tc-w-work__card.is-visible,
  body .tc-w-work.has-list-stack .tc-w-work__card.is-visible {
    position: relative;
    transform: none;
    height: auto;
  }

  .tc-w-work__card::after {
    opacity: 0;
  }
}


/* Tablet and mobile: same sticky stack as desktop. Type scales so names are not clipped. */
@media (max-width: 900px) {
  .tc-w-work__filters {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
  }

  .tc-w-work__client {
    font-size: clamp(32px, 8vw, 56px);
    line-height: 1;
  }
}

/* Mobile view label replaces the project title from 768px down, not on the tablet layout. */
@media (max-width: 768px) {
  .tc-w-work--has-view .tc-w-work__title {
    display: none;
  }

  .tc-w-work--has-view .tc-w-work__view {
    display: block;
  }
}

@media (max-width: 767px) {
  .tc-w-work--hide-filters-m .tc-w-work__filters {
    display: none;
  }
}