.cnc-gallery {
  display: flex;
  width: min(100%, 756px);
  flex-direction: column;
  gap: 40px;
  margin: 40px auto 0;
}
.cnc-track { position: relative; width: 100%; --cnc-top: 132px; }
.cnc-track::after { display: block; height: clamp(260px, 45vh, 400px); content: ""; }
.cnc-scene {
  position: sticky;
  top: var(--cnc-top);
  width: 100%;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  isolation: isolate;
  perspective: 1600px;
  background: #c6d5df;
}
.cnc-scene .cnc-layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}
.cnc-back { z-index: 0; transform-origin: right center; transform: scale(1.04); }
.cnc-middle { z-index: 1; }
.cnc-front { z-index: 2; transform-origin: right center; transform: translateY(.8%) scale(1.08); }
[data-cnc-scene="depth"] .cnc-back { transform-origin: center; transform: scale(1.08); }
[data-cnc-scene="depth"] .cnc-front { transform-origin: 75% 50%; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cnc-track::after { height: 0; }
  .cnc-scene { position: relative; top: auto; }
  .cnc-scene .cnc-layer { will-change: auto; }
}

/* Keep the banner entrance separate from the layer transforms used for depth. */
.cnc-scene { background: transparent; }
.cnc-artwork { position: absolute; inset: 0; overflow: hidden; isolation: isolate; perspective: 1600px; background: #c6d5df; }
.cnc-layers { position: absolute; inset: 0; }
.cnc-shade { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,.2) 40%, transparent 76%); }
[data-cnc-scene="depth"] .cnc-shade { background: linear-gradient(90deg, rgba(0,0,0,.48), rgba(0,0,0,.17) 42%, transparent 74%); }
.cnc-copy { position: absolute; z-index: 4; left: clamp(16px, 4.3%, 32px); right: 16px; color: #fff; pointer-events: none; }
.cnc-copy--top { top: clamp(18px, 7.5%, 32px); }
.cnc-copy--bottom { bottom: clamp(18px, 7.5%, 32px); }
.cnc-copy__title { margin: 0; color: #fff; font-family: inherit; font-size: clamp(22px, 4.5vw, 38px); font-weight: 750; line-height: 1.14; letter-spacing: -.025em; overflow-wrap: normal; }
.cnc-copy__subtitle { margin: 10px 0 0; color: #fff; font-family: inherit; font-size: clamp(12px, 2vw, 16px); font-weight: 400; line-height: 1.5; letter-spacing: .06em; }
@keyframes cnc-copy-enter { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: no-preference) {
  .has-js .cnc-artwork.scroll-reveal .cnc-copy__title,
  .has-js .cnc-artwork.scroll-reveal .cnc-copy__subtitle { opacity: 0; transform: translateX(-40px); }
  .has-js .cnc-artwork.scroll-reveal--visible .cnc-copy__title { animation: cnc-copy-enter .8s ease-out .3s both; }
  .has-js .cnc-artwork.scroll-reveal--visible .cnc-copy__subtitle { animation: cnc-copy-enter .8s ease-out .5s both; }
}
@media (max-width: 600px) {
  .cnc-copy__title { font-size: clamp(20px, 6vw, 28px); }
  .cnc-copy__subtitle { margin-top: 7px; font-size: clamp(12px, 3.2vw, 15px); letter-spacing: .035em; }
}
@media (prefers-reduced-motion: reduce), print {
  .cnc-artwork.scroll-reveal { opacity: 1; translate: none; transition: none; }
  .cnc-copy__title, .cnc-copy__subtitle { opacity: 1; transform: none; animation: none; }
}

.cnc-documents { display: flex; flex-direction: column; gap: 40px; width: min(80%, 512px); margin: 40px auto 0; }
.cnc-document { margin: 0; width: 100%; }
.cnc-documents .cnc-document img { display: block; width: 100%; height: auto; max-width: 100%; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }

/* Touch layouts follow the page flow; depth uses viewport progress instead of a sticky spacer. */
@media (max-width: 768px) {
  .cnc-track::after { display: none; height: 0; }
  .cnc-scene { position: relative; top: auto; overflow: visible; }
  .cnc-gallery, .cnc-documents { gap: 24px; }
  .cnc-documents { margin-top: 24px; }
}