.featured-work-mounted .page.home > :not(.hero__container):not(.featured-work-showcase) {
  display: none !important;
}

body.featured-work-mounted { overflow-x: clip; }
body.featured-work-mounted .main { overflow: visible !important; }

.featured-work-showcase {
  --fw-ink: #171717;
  position: relative;
  z-index: 3;
  width: 100%;
  background: #171717;
  color: var(--fw-ink);
  font-family: var(--font-sans);
}

.fw-intro {
  height: 7rem;
  padding: 0 2.1vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #d9d9d9;
  font-size: .75rem;
  letter-spacing: .06em;
}

.fw-card {
  --card-bg: #f2f1ef;
  --card-fg: #171717;
  --tag-bg: rgba(0, 0, 0, .075);
  position: sticky;
  top: 0;
  z-index: calc(10 + var(--card-index));
  height: 100svh;
  min-height: 720px;
  overflow: hidden;
  color: var(--card-fg);
  background: var(--card-bg);
  clip-path: polygon(0 0, 22.5% 0, 25.4% 4.5rem, 100% 4.5rem, 100% 100%, 0 100%);
  isolation: isolate;
}

.fw-card--paper { --card-bg: #f1f0ee; }
.fw-card--signal { --card-bg: #dfff00; --tag-bg: rgba(0, 0, 0, .08); }
.fw-card--ice { --card-bg: #b8dce7; --tag-bg: rgba(255, 255, 255, .24); }
.fw-card--coral { --card-bg: #ff6b50; --tag-bg: rgba(255, 255, 255, .2); }
.fw-card--graphite { --card-bg: #222; --card-fg: #f3f2ef; --tag-bg: rgba(255, 255, 255, .1); }

.fw-card__tab {
  position: absolute;
  top: 0;
  left: 2.1vw;
  height: 4.5rem;
  display: flex;
  align-items: center;
  font-size: clamp(.72rem, .82vw, .95rem);
  letter-spacing: .055em;
  white-space: nowrap;
}

.fw-card__content {
  height: 100%;
  padding-top: 4.5rem;
  box-sizing: border-box;
}

.fw-card__header {
  position: relative;
  min-height: 18.25rem;
  padding: 2.5rem 2.1vw 2rem;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(15rem, 1fr);
  border-bottom: 2px dotted currentColor;
  box-sizing: border-box;
}

.fw-card__header h2 {
  align-self: start;
  max-width: 79%;
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(3.25rem, 5.35vw, 7rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.055em;
}

.fw-card__meta {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding-top: .6rem;
  font-size: clamp(.7rem, .8vw, .95rem);
  letter-spacing: .045em;
}

.fw-card__tags {
  position: absolute;
  right: 2.1vw;
  bottom: 2rem;
  width: min(24vw, 32rem);
  overflow: hidden;
  padding: .45rem .65rem;
  background: var(--tag-bg);
  white-space: nowrap;
  font-size: clamp(.67rem, .72vw, .86rem);
  letter-spacing: .05em;
}

.fw-card__tags span {
  display: block;
  width: max-content;
  animation: fw-marquee 13s linear infinite;
}

.fw-card__body {
  height: calc(100% - 18.25rem);
  min-height: 25rem;
  padding: 2rem 2.1vw 2.2rem;
  display: grid;
  grid-template-columns: minmax(14rem, 23%) minmax(0, 1fr) minmax(12rem, 25%);
  gap: 2.1vw;
  box-sizing: border-box;
}

.fw-card__copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: .3rem 0;
}

.fw-card__copy p {
  margin: 0;
  max-width: 25rem;
  font-size: clamp(.78rem, .88vw, 1.05rem);
  line-height: 1.8;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.fw-card__cta {
  appearance: none;
  margin: 0;
  color: inherit;
  background: transparent;
  border: 0;
  width: max-content;
  padding-bottom: .2rem;
  border-bottom: 1px solid currentColor;
  font-family: inherit;
  font-size: clamp(.75rem, .8vw, .95rem);
  letter-spacing: .05em;
  cursor: pointer;
}

.fw-card__cta b {
  display: inline-block;
  margin-left: .7rem;
  font-size: 1.35em;
  transition: transform .25s ease;
}

.fw-card__cta:hover b { transform: translateX(.35rem); }

.fw-media,
.fw-media-stack {
  min-width: 0;
  min-height: 0;
  margin: 0;
}

.fw-media {
  position: relative;
  overflow: hidden;
  background: #111;
  transform: translate3d(0, var(--parallax, 0), 0);
  transition: transform .16s linear;
  cursor: pointer;
}

.fw-media:focus-visible,
.fw-card__cta:focus-visible,
.project-modal__close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.fw-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.035);
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .6s ease;
}

.fw-media:hover img { transform: scale(1.085); }
.fw-media--hero { height: 100%; }
.fw-media-stack { display: grid; grid-template-rows: 57% 43%; gap: 1.3rem; }

html.project-modal-open,
html.project-modal-open body {
  overflow: hidden !important;
}

.project-modal {
  position: fixed;
  inset: 0;
  z-index: 20000;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  color: #f2f2f2;
  background: rgba(17, 17, 17, .96);
  opacity: 0;
  transition: opacity .26s ease;
}

.project-modal[hidden] { display: none; }
.project-modal--open { opacity: 1; }

.project-modal__dialog {
  width: min(100%, 1760px);
  min-height: 100%;
  margin: 0 auto;
  padding: 0 clamp(1rem, 2.6vw, 3rem) clamp(2rem, 5vw, 6rem);
  box-sizing: border-box;
}

.project-modal__header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  min-height: 92px;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .35);
  background: rgba(17, 17, 17, .9);
  backdrop-filter: blur(12px);
}

.project-modal__eyebrow {
  display: block;
  margin-bottom: .35rem;
  font: 600 .68rem/1 "Geist Mono", monospace;
  letter-spacing: .08em;
}

.project-modal__header h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(1.35rem, 2.5vw, 3rem);
  font-weight: 600;
  line-height: .95;
  letter-spacing: -.045em;
}

.project-modal__close {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 1rem;
  border: 0;
  color: #242424;
  background: #df0;
  font: 600 .72rem/1 "Geist Mono", monospace;
  cursor: pointer;
}

.project-modal__gallery {
  display: grid;
  gap: clamp(.75rem, 1.8vw, 2rem);
  padding-top: clamp(1rem, 2.6vw, 3rem);
}

.project-modal__image {
  position: relative;
  width: 1280px;
  max-width: 100%;
  margin: 0 auto;
  background: #242424;
}

.project-modal__image img {
  display: block;
  width: 100%;
  height: auto;
}

.project-modal__image figcaption {
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  padding: .35rem .5rem;
  color: #242424;
  background: rgba(255, 255, 255, .82);
  font: 600 .62rem/1 "Geist Mono", monospace;
}

@keyframes fw-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-34%); }
}

@media (max-width: 900px) {
  .fw-intro { height: 5rem; padding-inline: 1rem; }
  .fw-card {
    min-height: 680px;
    clip-path: polygon(0 0, 48% 0, 56% 3.5rem, 100% 3.5rem, 100% 100%, 0 100%);
  }
  .fw-card__tab { left: 1rem; height: 3.5rem; }
  .fw-card__content { padding-top: 3.5rem; }
  .fw-card__header {
    min-height: 15.5rem;
    padding: 1.5rem 1rem 1.35rem;
    grid-template-columns: 1fr auto;
  }
  .fw-card__header h2 { max-width: 96%; font-size: clamp(2.6rem, 10vw, 4.5rem); }
  .fw-card__meta { padding-top: .2rem; text-align: right; }
  .fw-card__tags { right: 1rem; bottom: 1.35rem; width: 48vw; }
  .fw-card__body {
    height: calc(100% - 15.5rem);
    min-height: 0;
    padding: 1rem;
    grid-template-columns: 34% 1fr;
    grid-template-rows: minmax(0, 1fr);
    gap: 1rem;
  }
  .fw-card__copy p { font-size: .66rem; line-height: 1.58; }
  .fw-media--hero { height: 100%; }
  .fw-media-stack { display: none; }
}

@media (max-width: 520px) {
  .fw-intro { font-size: .57rem; }
  .fw-card { min-height: 620px; }
  .fw-card__header { min-height: 14.5rem; display: block; }
  .fw-card__header h2 { font-size: clamp(2.35rem, 12vw, 3.8rem); line-height: .94; }
  .fw-card__meta { position: absolute; left: 1rem; bottom: 1.25rem; align-items: flex-start; gap: .25rem; text-align: left; font-size: .56rem; }
  .fw-card__tags { right: 1rem; bottom: 1.25rem; width: 45vw; font-size: .52rem; }
  .fw-card__body { height: calc(100% - 14.5rem); grid-template-columns: 36% 1fr; }
  .fw-card__copy p { font-size: .58rem; }
  .fw-card__cta { font-size: .56rem; }
  .project-modal__dialog { padding-inline: .75rem; }
  .project-modal__header { min-height: 76px; gap: .6rem; }
  .project-modal__header h2 { max-width: 66vw; font-size: 1.15rem; }
  .project-modal__eyebrow { font-size: .52rem; }
  .project-modal__close { min-height: 38px; padding-inline: .7rem; font-size: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fw-card__tags span { animation: none; }
  .fw-media { transform: none !important; transition: none; }
  .fw-media img { transition: none; }
}