/* Native sticky wrappers; only their inner panels receive scroll transforms. */
#case-studies.project-stack-section {
  position: relative; z-index: 10; overflow: visible; isolation: isolate;
  background: #000; padding: 12vh 4vw 6vh;
  color: #fff; font-family: var(--font-geist-sans), sans-serif;
  --stack-top: 100px; --stack-step: 14px;
  scroll-margin-top: 100px;
}
.project-stack-heading {text-align: center; margin: 0 auto 7vh; max-width: 760px;}
.project-stack-heading h2 {font-size: clamp(32px, 3.1vw, 60px); font-weight: 300; line-height: 1.1; letter-spacing: -.035em;}
.project-stack-list {padding-bottom: 20svh;}
.project-stack-marker {height: 0; position: relative; pointer-events: none;}
.project-stack-card {
  position: sticky; top: calc(var(--stack-top) + var(--card-index) * var(--stack-step));
  z-index: calc(var(--card-index) + 1); height: clamp(440px, 70svh, 820px);
  margin-bottom: 18svh;
}
.project-stack-card:last-child {margin-bottom: 0;}
.project-stack-panel {
  display: grid; grid-template-columns: .9fr 1.35fr; width: 100%; height: 100%;
  overflow: hidden; border-radius: clamp(16px, 1.4vw, 28px); position: relative;
  background: #111115; border: 1px solid #ffffff24;
  box-shadow: 0 -14px 50px #0009, 0 30px 70px #000a, inset 0 1px 0 #ffffff0c;
  transform-origin: center top; text-decoration: none; color: inherit;
  transition: border-color .3s; outline-offset: 5px;
}
.project-stack-panel:hover {border-color: #ffffff55;}
.project-stack-panel:focus-visible {outline: 2px solid #c9b7ed;}
.project-stack-copy {
  position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(28px, 3.6vw, 72px); background: linear-gradient(135deg,#17171c,#0b0b0e);
}
.project-stack-meta {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  font-family: var(--font-geist-mono), monospace; font-size: 14px; text-transform: uppercase;
  letter-spacing: .12em; color: #d4d4db; margin-bottom: clamp(24px, 3.4vh, 44px);
}
.project-stack-count {color: #73737e; font-size: 12px; white-space: nowrap; letter-spacing: .05em;}
.project-stack-copy h3 {font-weight: 400; font-size: clamp(29px, 2.7vw, 54px); line-height: 1.13; letter-spacing: -.035em; margin: 0 0 24px; text-wrap: balance;}
.project-stack-copy p {font-size: clamp(16px, 1.15vw, 22px); line-height: 1.65; color: #b2b2be; margin: 0; max-width: 34em;}
.project-stack-link {align-self: flex-start; font-family: var(--font-geist-mono), monospace; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 13px 18px; margin-top: 32px; border: 1px solid #ffffff32; border-radius: 5px; background: #ffffff04; transition: background .3s, border-color .3s;}
.project-stack-panel:hover .project-stack-link {background: #ffffff0e; border-color: #ffffff65;}
.project-stack-visual {position: relative; min-width: 0; overflow: hidden; display: grid; place-items: center; background: radial-gradient(ellipse at 55% 38%,var(--project-accent),#09090d 78%);}
.project-stack-visual::after {content: ''; position: absolute; inset: 0; pointer-events: none; border-left: 1px solid #ffffff10; background: linear-gradient(0deg,#0005,transparent 35%);}
.project-stack-visual img {display: block; width: 100%; height: 100%; object-fit: contain; padding: 2.8vw 2vw; transform-origin: center;}
.project-stack-shade {position: absolute; z-index: 3; inset: 0; background: #000; opacity: 0; pointer-events: none;}
@media(min-width: 1600px) {.project-stack-copy {padding: 3.6vw;} .project-stack-meta {font-size: 16px;}}
@media(max-width: 900px) {
  #case-studies.project-stack-section {padding: 8vh 5vw 5vh; --stack-top: 80px; --stack-step: 9px; scroll-margin-top: 90px;}
  .project-stack-heading {margin-bottom: 5vh;}
  .project-stack-card {height: calc(100svh - 144px); min-height: 580px; max-height: 850px; margin-bottom: 12svh;}
  .project-stack-panel {grid-template-columns: 1fr; grid-template-rows: 43% 57%;}
  .project-stack-visual {grid-row: 1;}
  .project-stack-visual::after {border-left: 0; border-bottom: 1px solid #ffffff10;}
  .project-stack-visual img {padding: 5vw;}
  .project-stack-copy {grid-row: 2; padding: clamp(22px, 5vw, 38px);}
  .project-stack-meta {font-size: 13px; margin-bottom: 18px;}
  .project-stack-copy h3 {font-size: clamp(28px, 4.5vw, 38px); margin-bottom: 16px;}
  .project-stack-copy p {font-size: 16px; line-height: 1.55;}
  .project-stack-link {margin-top: 22px; padding: 11px 15px;}
}
/* Short screens and reduced motion retain all projects in normal reading flow. */
@media(max-height: 549px), (prefers-reduced-motion: reduce) {
  .project-stack-card {position: relative; top: auto; height: auto; min-height: 0; margin-bottom: 28px;}
  .project-stack-panel {min-height: 440px; transform: none !important;}
  .project-stack-visual img {transform: none !important;}
  .project-stack-shade {display: none;}
}
@media(max-width: 900px) and (max-height: 549px), (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .project-stack-panel {grid-template-rows: auto auto;}
  .project-stack-visual {height: 46vw; min-height: 170px;}
  .project-stack-copy {padding: 25px;}
}
/* A 580px card plus the final 107px sticky offset needs a tall viewport.
   Compact phones use normal flow so every title, description and CTA fits. */
@media(max-width: 900px) and (max-height: 739px) {
  .project-stack-card {position: relative; top: auto; height: auto; min-height: 0; margin-bottom: 28px;}
  .project-stack-list {padding-bottom: 0;}
  .project-stack-panel {grid-template-rows: auto auto; min-height: 0; transform: none !important;}
  .project-stack-visual {height: 46vw; min-height: 170px;}
  .project-stack-visual img {transform: none !important;}
  .project-stack-copy {padding: 25px;}
  .project-stack-shade {display: none;}
}