.ns-work-preview {
  padding: clamp(6rem, 11vw, 10rem) 0 0;
  border-top: 1px solid var(--ns-line);
  background: #0f0f0e;
}

.ns-signal-field + .ns-work-preview { padding-top: clamp(4.5rem, 8vw, 7rem); }

.ns-work-preview__header {
  display: grid;
  grid-template-columns: minmax(300px, 1.3fr) minmax(260px, .7fr);
  gap: 3rem;
  align-items: end;
  width: min(1580px, calc(100% - clamp(3rem, 12vw, 14rem)));
  max-width: 1580px;
  margin: 0 auto clamp(4rem, 8vw, 7rem);
}

.ns-work-preview__header h2 {
  margin: 0;
  color: var(--ns-bone);
  font: 600 clamp(3.3rem, 6.5vw, 7rem)/.92 "Playfair Display", Georgia, serif;
  letter-spacing: -.065em;
}

.ns-work-preview__header h2 em { color: var(--ns-gold); font-weight: 500; }
.ns-work-preview__header > p { max-width: 31rem; margin: 0 0 .5rem; color: var(--ns-muted); line-height: 1.75; }
.ns-work-preview__list { display: grid; margin: 0; }
.ns-featured-case { min-height: 125svh; position: relative; display: block; color: inherit; background: #0b0b0a; }
.ns-featured-case__stage { position: sticky; top: 0; height: 100svh; isolation: isolate; overflow: hidden; }
.ns-featured-case__stage::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(0deg, rgba(5,5,4,.94) 0%, rgba(5,5,4,.2) 58%, rgba(5,5,4,.15) 100%), linear-gradient(90deg, rgba(5,5,4,.62), transparent 65%); }
.ns-featured-case__media { position: absolute; inset: 0; z-index: -2; margin: 0; overflow: hidden; background: #11110f; clip-path: inset(var(--project-y-inset, 9vh) var(--project-x-inset, 7vw) round var(--project-radius, 28px)); transform: scale(var(--project-scale, 1)); transform-origin: center; will-change: clip-path, transform; }
.ns-featured-case__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; background: #11110f; }
.ns-featured-case__media--site-overview { isolation: isolate; background: #11110f; }
.ns-featured-case__media--site-overview::before { content: ""; position: absolute; inset: -5%; z-index: -1; background: #11110f url("../assets/images/northshore-site-image-pack/portfolio/velvet-paw-mobile-grooming.jpg") center / cover no-repeat; filter: blur(22px) brightness(.68); transform: scale(1.08); }
.ns-featured-case__image--site-overview { position: relative; z-index: 1; object-fit: contain !important; object-position: center; background: transparent !important; }
.ns-featured-case__copy { position: absolute; left: clamp(1.5rem, 7vw, 8.5rem); bottom: clamp(4rem, 9vh, 7rem); z-index: 1; width: min(34rem, calc(100% - 3rem)); padding: clamp(1.2rem, 2.2vw, 2rem); background: linear-gradient(120deg, rgba(10,10,9,.9), rgba(10,10,9,.52)); border-left: 1px solid var(--ns-gold); backdrop-filter: blur(10px); opacity: var(--project-opacity, 1); transform: translateY(var(--project-copy-y, 0px)); will-change: opacity, transform; }
.ns-featured-case__number { margin: 0 0 1.2rem; color: var(--ns-gold); font: 500 .64rem/1.4 "DM Mono", monospace; letter-spacing: .13em; }
.ns-featured-case h2, .ns-featured-case h3 { margin: 0; color: var(--ns-bone); font: 500 clamp(2rem, 3.5vw, 4rem)/1 "Playfair Display", Georgia, serif; letter-spacing: -.045em; }
.ns-featured-case__link { position: absolute; inset: 0; z-index: 2; color: inherit; text-decoration: none; }
.ns-featured-case__link:focus-visible { outline: 2px solid var(--ns-gold); outline-offset: -6px; }
.ns-featured-case__copy > p:not(.ns-featured-case__number) { margin: 1.5rem 0 2rem; color: var(--ns-muted); line-height: 1.75; }
.ns-featured-case__copy > span { color: var(--ns-bone); font: 600 .69rem Manrope, sans-serif; letter-spacing: .09em; text-transform: uppercase; }
.ns-featured-case__copy .ns-arrow-icon { color: var(--ns-gold); margin-left: .5rem; }
.ns-work-preview__footer { margin: 0 auto; padding: clamp(3.5rem, 6vw, 5.5rem) 1.5rem; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:1rem; text-align: center; }
.ns-work-preview__footer .ns-button { display: inline-flex; align-items:center; justify-content:center; gap:.65rem; min-height:52px; text-decoration: none; }
.ns-work-preview__footer button.ns-button { font:600 .75rem/1 "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.ns-work-preview__footer .ns-button--gold .ns-arrow-icon { color:#11100e; }
.ns-work-preview--work-page { padding-top: clamp(8rem, 13vh, 10rem); }
.ns-work-preview--work-page .ns-work-preview__header h1 { margin:0; color:var(--ns-bone); font:600 clamp(3.3rem,6.5vw,7rem)/.92 "Playfair Display",Georgia,serif; letter-spacing:-.065em; }
.ns-work-preview--work-page .ns-work-preview__header h1 em { color:var(--ns-gold); font-weight:500; }
.ns-process__note { max-width: 36rem; margin: 0 auto; padding: 2rem 1.5rem 7rem; color: var(--ns-muted); font: italic .88rem/1.7 Manrope, sans-serif; text-align: center; }

@media (max-width: 850px) {
  .ns-work-preview__header { width: calc(100% - 3rem); grid-template-columns: 1fr; gap: 1.8rem; }
  .ns-work-preview__header { margin-bottom: 3.5rem; }
  .ns-work-preview__list { gap:1.25rem; padding:0 1rem; }
  .ns-featured-case { min-height:0; border:1px solid rgba(189,142,73,.26); background:#0b0b0a; overflow:hidden; }
  .ns-featured-case__stage { position:relative; height:auto; overflow:visible; }
  .ns-featured-case__stage::after { display:none; }
  .ns-featured-case__media { position:relative; inset:auto; clip-path:none!important; transform:none!important; background:#11110f; }
  .ns-featured-case__media img { width:100%; height:auto; object-fit:contain; object-position:center top; }
  .ns-featured-case__copy { position:relative; left:auto; bottom:auto; width:100%; padding:1.4rem 1.25rem 1.6rem; border-left:0; border-top:1px solid rgba(189,142,73,.32); background:linear-gradient(145deg,#11110f,#0a0a09); backdrop-filter:none; opacity:1!important; transform:none!important; }
  .ns-featured-case__copy > p:not(.ns-featured-case__number) { margin:1rem 0 1.3rem; }
  .ns-work-preview__footer { padding:3rem 1.5rem 5rem; }
  .ns-work-preview__footer .ns-button { width:100%; max-width:24rem; }
  .ns-process__note { padding: 3rem 0 0; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .ns-featured-case { min-height:0; border-top:1px solid rgba(189,142,73,.26); }
  .ns-featured-case__stage { position:relative; height:auto; }
  .ns-featured-case__stage::after { display:none; }
  .ns-featured-case__media { position:relative; inset:auto; aspect-ratio:16 / 9; clip-path:none; transform:none; }
  .ns-featured-case__media img { object-fit:cover; }
  .ns-featured-case__copy { position:relative; left:auto; bottom:auto; width:min(44rem,100%); padding:2rem clamp(1.25rem,7vw,7rem) 2.5rem; border-left:0; border-top:1px solid rgba(189,142,73,.32); background:#0b0b0a; backdrop-filter:none; transform:none; opacity:1; }
}